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Введение 


Добро пожаловать в книгу о проекте, который при- 
зван сформировать новое представление о Всемирной 
паутине. 


Своим появлением эта книга обязана сайту, запу- 
щенному 8 мая 2003 года. Он изменил существовав- 
шее до тех пор отношение к веб-дизайну и через не- 
которое время получил международное признание. 
Сайт, названный С$5$ Геп Сагаеп, является резуль- 
татом совместной работы многих одаренных людей 
из разных стран. 


Сайт Геп Саг4еп одновременно является и манифес- 
том, и галереей; он был создан, чтобы продемонстри- 
ровать, чего можно достичь за счет применения каскад- 
ных таблиц стилей. Мы призываем всех дизайнеров 
предлагать собственные оригинальные работы в виде 
таблиц стидей и графических изображений. Но есть 
одно условие: базовый НТМТ-файл должен оставать- 
ся одним и тем же. У этого правила нет исключений; в 
каждом варианте дизайна НТМГ-разметка идентична. 


Звучит неправдоподобно? Может, даже бредово? Воз- 
можно, но совершенно очевидно, что в умелых руках 
С55 ничем не уступает другим инструментам проек- 
тирования. В этой книге мы представим 36 лучших 
работ, выставленных на сайте, и подробно опишем, 
как их авторы подходили к проектированию и какие 
при этом использовались инструменты и методы ко- 
дирования. 


Целая книга об одном веб-сайте? Серьезно? Если бы 
это был рядовой сайт, ваше недоумение было бы оп- 
равдано. Но еп Саг4еп содержит столько поучитель- 
ных идей, столько приемов, предложенных разными 
людьми со всего света, что перед нами встала пробле- 
ма, как все это уместить в одной книге. 


О чем эта книга 


Можно ли назвать эту книгу документацией и словес- 
ным описанием сайта: Отчасти. Может ли она служить 
руководством по заслуживающим доверия методам и 
приемам веб-дизайна? Определенно, да. Является ли 
она галереей, где можно почерпнуть идеи для соб- 
ственных проектов? Без сомнения. 


ПРИМЕЧАНИЕ 
` Сайт 655$ 2еп баг4еп со всеми описанными в книге варианта- 
ми дизайна находится по адресу мм. с552епдатчеп. сот. 
Чтобы увидеть разметку, найдите в своем браузере функцию 
МТем 5оигсе (Текст НТМГ), которая обычно находится в меню 
\Тем/ (Вид). 


Для ознакомления с таблицей стилей, с помощью которой 
оформлен тот или иной вариант дизайна, найдите на странице 
ссылку Мтем ТВ1$ Оез1ди' (55. Но будьте внимательны: для раз- 
ных дизайнов местонахождение этой ссылки различно. 


При работе над этой книгой нам было ясно, что в сайте 
Геп Саг4еп заключено так много разнообразных знаний 
осовременном веб-дизайне, что любая книга, посвящен- 
ная какому-нибудь одному его аспекту, не смогла бы 
исчерпать всей глубины. Мы понимали, что необхо- 
димо раскрыть все особенности сайта. Типография, 
теория цвета, техника размещения элементов —в этой 
книге есть все. 


Можно ли считать эту книгу учебником по С$$: Да, но 
не для начинающих. Чтобы сосредоточиться на тонко- 
стях визуализации, нам пришлось пропустить началь- 
ную школу и поступить сразу в среднюю. Но в мага- 
зинах и так можно найти замечательные книги, 
посвященные основам синтаксиса и грамматики С5$. 
Мы рекомендуем купить какую-нибудь из них и читать 
ее параллельно с наитей. Тогда вы увидите, как теория 
претворяется в визуально привлекательные образы. 


Технические приемы, описываемые в этой книге, при- 
званы показать всю картину и проиллюстрировать 
способы решения задач визуализации, не останавли- 
ваясь на каждом аспекте спецификации С$$. Там, где 
необходимо, мы упоминаем о поддержке С55 в раз- 
ных браузерах, чтобы не отрываться от реальности. 


Кому предназначена 
эта книга 


Мы писали нашу книгу.для всех, кто интересуется ди- 
зайном и разработкой сайтов. 


Дизайнеры 

Применяя визуальный вокабулярий для обсуждения 
вопросов теории и практики применения С55, мы хо- 
тели показать, как с помощью технологий, основан- 


ных на самых современных стандартах, можно решать 
реально возникающие задачи, 


Программисты 


Основной упор сделан на визуальных аспектах, но это 
не значит, что вы должны обладать ученой степенью 
в области графического дизайна. Мы старались опре- 
делять все основные термины в самой книге, так что 
даже читатели, не знакомые с дизайном, смогут из- 
влечь пользу из описываемых идей и методов. 


Начинающие пользователи С$5$ 


Употребление жаргона и техницизмов сведено к ми- 
нимуму, поэтому большая часть материала доступна 
даже тем, кто имеет лишь смутное. представление о 


технологии (55$. Мы рекомендуем прочитать также ка- 
кую-нибудь книгу из рекомендуемого списка литера- 
туры, приведенного в разделе «В заключение», чтобы 
освоиться с синтаксисом и основными понятиями, а 
затем уже приступить к чтению этой книги, которая 
покажет, как эти идеи можно применить на практике, 
в том числе и к ваптим собственным проектам. 


В числе рассматриваемых тем есть и базовые принци- 
пы веб-дизайна, применимые в самых разных, хотя и 
не во всех, ситуациях. Создать веб-страницу, включа- 
ющую таблицы С$$, можно и с помощью автомати- 
ческих инструментов типа Масготе а Отеаглутеауег, но 
для реализации рассматриваемых нами приемов все же 
лучше подходит ручное кодирование в каком-нибудь 
НТМЕ-редакторе. Если вы привыкли к перетаскиванию 
иконок с панели инструментов в рабочую область, то в 
некоторых отношениях эта книга может показаться 
технически сложной, Впрочем, мынадеемся; что это не 
отвратит вас от искушения обогатить свои знания, 


Опытные пользователи С$5 


Читатели, уже знакомые со всеми тонкостями модели 
прямоугольных областей, плавающим размещением 
и селекторами, тем не менее найдут для себя много 
полезного. Упор на визуальные аспекты в сочетании с 
примерами практического применения С55, предло- 
женными самыми творческими и изобретательными 
дизайнерами современности, — гарантия того, что даже 
маститые профессионалы найдут среди множества 
рассматриваемых тем немало для себя нового. 


Принятые соглашения 


Каскадные таблицы стилей (С5$) — это лишь одна из 
широкого спектра технологий, одобренных консорциу- 
мом У/о4 УЛае УеЬ Сопзогиит (\УЗС), получивших 
общее название «стандарты \М\еБ». В их число входят так- 
же НТМУ, ХНТМЬ и ХМЕ. Когда говорят о проектиро- 
вании на основе стандартов, имеют в виду весь набор. 
Если веб-страница составлена в соответствии со стандар- 
тами, то говорят, что она совместима со стандартами. 


У языков НТМЬЁ и ХНТМЕ много общего. Поэтому 
все сказанное об НТМЕ справедливо и для ХНТМГ, 
если только явно не оговорено противное, 


Примечания и советы на полях относятся к тексту, 
расположенному рядом, 


Названия свойств, определенных в С55, и их значения 
печатаются моноитиринным шрифтом, например: 
12рх, Еопё-512е или #зипштагу. Приведем краткий 


перечень того, что имеется в виду при упоминании 
Г{егпе! Ехрюгег: 


Ниегпе! Ехр]огег — все основные версии. К. ним отно- 
сятся версии 5.0, 5.5 и 6.0 для М/Лл4о\, а также 5.2 для 
Мас ОЗ Х, Версии младше 5.0 сегодня уже практичес- 
ки не используются, так что в большинстве случаев 
их можно не принимать во внимание, 


Гл{егпе! Ехрогег для МЛп4о\$ — все основные версии 
для М9 оу. Версии для Мас не рассматриваются; 
Ниегие{ Ехр]огег для Мас - версия 5.2 для Мас ОЗ Хи, 
как правило, версия 5.1 для Мас 05.9. Версии для 
УЛпаом не рассматриваются; 


пиегпе! Ехр|огег х.х — если упомянут конкретный но- 
мер версии или несколько номеров, то остальные вер- 
сии не рассматриваются, 


Как пользоваться 
ЭТОЙ КНИГОЙ 


У типичного сайта имеется отправная точка, которую 
часто называют начальной или домашней страницей. 
Из нее можно попасть в любое место сайта, выбрав 
один из основных разделов и следуя по ссылкам внут- 
ри представленного в нем контента. Для поиска нуж- 
ного контента можно также воспользоваться поиско- 
вой системой. А можно щелкнуть по какой-нибудь 
ссылке наугад и посмотреть, куда она приведет. 


Именно такую модель мы и выбрали для данной кни- 
ги. Нельзя сказать, что какой-то определенный способ 
работы с ней правилен или неправилен, Вы можете на- 
чать с первой страницы и читать от корки до корки, а 
можете сразу перейти к главе, которая вас особенно 
интересует. Книгу можно читать в любом порядке, на- 
чав с любого приглянувшегося варианта дизайна. 


Книга состоит из двух крупных частей: 

+ в первой главе обсуждается устройство сайта еп 
Сагаеп и некоторые основополагающие темы, на- 
пример структура разметки и методика проекти- 
рования, обеспечивающая гибкость модификаций; 


+ вторая часть, занимающая почти всю книгу, состо- 
ит из шести глав, В каждой рассматривается по шесть 
вариантов дизайна еп Сагдеп с точки зрения какой- 
либо общей темы, например типографских возмож- 
ностей. Изучив различные проблемы и методы их 
решения на этих 36 примерах, вы освоите основные 
принципы веб-дизайна, а также способы примене- 
ния форматирования на базе С5$. 


Философия СС5$-дизайна __ 


Вот краткий обзор всех семи глав. 


Глава 1. Исходный текст 

Рассказ о возникновении идеи сайта С55 /еп Сагдеп и об 
эволюции применяемых в нем таблиц стилей. Обсуж- 
дается структура разметки и общие принципы дизайна. 


Глава 2. Дизайн 

Рассматриваются основные элементы дизайна и их 
применение в контексте У!еЬ. Затрагиваются вопро- 
сы теории цвета, пропорций и позиционирования, 
отношения между шрифтами и фотографиями, а так- 
же совместное и гармоничное использование А4оБе 
РВото$Вор и С5$. 


Глава 3. Верстка 

Создание сложных макетов страниц с помощью С$$. 
Верстка с несколькими колонками, на базе плавающих 
блоков и позиционирования. 


Глава 4. Графика 

Применение графики в дополнение к макету, методы 
создания графических изображений. Замена графики, 
форматы графических файлов. Где найти исходный 
графический материал. 


Глава 5. Типография 


Все, относящееся к типографии; ограничения на ис- 
пользование шрифтов в \М/еЬ и как их обойти. Выбор 
размера и гарнитуры шрифта, графические шрифты. 


Глава 6. Специальные эффекты 
Нетривиальное применение С$$ для фильтрации сти- 
лей в зависимости от браузера, создания новых гиб- 
ких способов верстки и обхода технических ограни- 
чений с помощью остроумно написанного кода. 


Глава 7. Реконструкция 


Постойте за спиной шести дизайнеров и посмотрите, 
как они это делают. Мы возвращаемся к некоторым 
из рассмотренных ранее вариантов дизайнов и деталь- 
но обсуждаем каждый шаг. На ваших глазах принци- 
пы, изложенных в предыдущих пяти главах, приме- 
няются на практике и дают потрясающий эффект. 


Как видите, мы постарались втиснуть в эту книгу мак- 
симум возможного для того, чтобы сделать ее самым 
полным источником по современному веб-дизайну, 
основанному на стандартах. 


Надеемся, что читать книгу вам будет так же приятно, 
как нам было приятно писать ее, 


Дэйв Ши и Молли Хольшшлаг, август 2004 г. 


Введение И 


Благодарности 

Дэйв Ши 

Прежде всего, хочу сказать спасибо своей жене Эйп- 
рил за то, что она долгими вечерами мирилась с моим 
отсутствием, когда я работал над этой книгой в мест- 


ной кофейне. Без ее поддержки, понимания и терпе- 
ния я бы не справился. 


(И, кстати, благодарю персонал кофейни З{агиск$ за то, 
что они так долго терпели парня, примостившегося в 
углу со своим ноутбуком, и поили его кофе с молоком.) 


Конечно, я благодарен также своим родителям, Горду 
и Линде, и братьям Мэтту и Джереми за то, что они 
притворялись, будто понимают все написанное, 


Выражаю признательность компании Огеат Рите 
5110$ (ммм. Агеат5 а 1ю3.сот) за то, что они предо- 
ставили хостинг для сайта еп Саг4аеп и продолжают 
поддерживать его, хотя сайт сильно разросся. 


Два года назад, когда я только начинал задумываться 
над проектом еп Сат4еп, я даже представить себе не 
мог, что вокруг него образуется такое сообщество. 
Друзья, вас слишком много, чтобы я мог поблагода- 
рить каждого, но вы-то сами знаете о своих заслугах. 
То, что вы делаете ради процветания \М\/е, вдохновля- 
ет и воодушевляет меня. 


Огромное спасибо моему соавтору Молли за то, что она 
щедро делилась своими идеями и опытом и подбадри- 
вала меня. Ее перу принадлежит книга, которая приве- 
ла меня в эту отрасль много лет назад; а совместная ра- 
бота над этой книгой была истинным удовольствием. 


Молли Хольцшлаг 


Удивительно работать в области, где наши студен- 
ты так быстро становятся нашими учителями, где 
наш труд может в мгновение ока изменить представ- 
лениео \еь. Именно таким опытом стало для меня 
совместное с Дэйвом Ши написание книги, Это дало 
мне шанс увидеть, как моя собственная работа вдох- 
новила другого человека, который, в свою очередь, 
оказал влияние на целое новое поколение веб-ди- 
зайнеров. То, чему я научилась у Дэйва и многих 


других дизайнеров, внесших свою лепту в разработ- 
ку сайта Деп Саг4еп, позволило мне лучше понять, 
что такое С$$, более эффективно преподавать эту 
технологию и совершенно по-новому взглянуть на 
\У!еБ. Поэтому прежде всего я благодарна Дэйву, а 
затем уже всем прочим участникам проекта, многие 
из которых - мои друзья и учителя. Они помогли 
мне реализовать один из самых значимых в исто- 
рии веб-проектов. 


Лично же я хочу сказать спасибо Майклу, которого 
люблю, а также своей семье и друзьям, которых я вы- 
соко ценю и которые мирятся с моим переменчивым 
нравом: спасибо за вашу помощь и поддержку. Как 
всегда, благодарю Дэвида Фьюгейта, своего литератур- 
ного агента и личного друга, который никогда не ос- 
тавлял меня своей опекой и мудрым руководством. 
И, конечно, спасибо моим читателям и всем посети- 
телям моего сайта — за поддержку и ободрение, это так 
много значит для меня. | 


Дэйв и Молли вместе 


Всем принимавшим участие в подготовке этой книги 
огромное спасибо! Черил Ингланд - не просто заме- 
чательный редактор, она превратила работу в удоволь- 
ствие! Благодарим Шон Инман за усилия по техни- 
ческому оформлению рукописи и Элизу Рабеллино за 
тщательную корректуру. Мы также признательны вы- 
пускающим редакторам (Шарлин Уилл, Ким Скотт и 
Хилал Сала), благодаря им текст стал гораздо лучше. 
И, наконец, выражаем благодарность Нэнси Рюнцель 
и Клиффу Колби за то, что они поверили в идею и 
помогли нам воплотить ее в жизнь. 
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Исходный 
текст 


Заочень короткое время веб-дизайн продви- 
нулся очень далеко. Дизайнерам буквально 
приходилось читать исходные тексты, дей- 
ствовать методом проб и ошибок и раздви- 
гать пределы возможного. Это был спонтан- 
ный и захватывающий процесс. 


Однако со временем стала ясна необходи- 
мость выработки стандартов Ме. Это напря- 
мую связано с самой важной для нас про- 
граммой - веб-браузером. В этой главе вы 
познакомитесь со всем, что нужно знать об 
идеологии, процедурах и методах современ- 
ного веб-дизайна. 


В конце 1990-х годов Всемирная паутина 
была диким и опасным фронтиром. Все ме- 
нялось, и все было возможно. Тогда никто из 
нас еще не знал, что из всего этого получит- 
ся. И как это часто бывает с новой игрушкой, 
мы стремились «раздвинуть границы изве- 
данного», 


Исходный текст 


Возникновение 


И мы их раздвигали. НТМЕ. возник как простой язык 

для разметки научных статей, Поставщики браузеров 
и графические дизайнеры, не найдя там средств для 
верстки, с презрением отвергли его, Для преодоления 
ограничений появились всякие ухищрения типа тега 
<РОМТ> и таблиц, все это шло вразрез с теми целями, 
для которых НТМЕ. первоначально разрабатывался. 


Основные элементы применялись для создания маке- 
тов иначе, чем это задумывалось; элементы, имеющие 
очень конкретное назначение, игнорировались, так как 
выглядели невыразительно. На правильность струк- 
туры плевали вугоду визуальному украшению сайта. 


Разумеется, в то время от основных производителей 
браузеров помощи было не дождаться. Казалось, что 
ситуация будет только ухудшаться. Два крупнейших 
игрока — МсгозоЁ и Мебсаре — нагромождали одно не- 
стандартное расширение на другое, стремясь обойти 
друг друга в знаменитой Войне Браузеров. Конкурен- 
ция, конечно, способствует инновациям, но может и 
задушить их на корню; веб-мастера были вынуждены 
поддерживать несколько версий сайта, поскольку 
одна и та же разметка редко выглядела одинаково в раз- 
ных браузерах, если вообще хоть как-то ‘отображалась. 


В общем, был сплошной кавардак. Но огромные сум- 
мы, беспечно выброшенные на ветер во время бума 
интернет-компаний, все же способствовали росту Ме, 
несмотря на имеющиеся проблемы. Обосновать рас- 
ходы на поддержку двух версий сайта в условиях нео- 
граниченного финансирования было нетрудно. Одна- 
ко на рубеже тысячелетия и авторы контента, и 
инвесторы рептили, что с них хватит. 


Начало перемен 


В самом начале нового века бюджеты, выделяемые на 
поддержку сайтов, стали усыхать, поскольку капитал 
ушел. Когда в экономике начался спад, те немногие, 
кто сохранил работу, быстро поняли, что лишние уси- 
лия, затрачиваемые на написание кода для некоррект- 
но работающих и нестандартных браузеров, не оку- 
паются. Нужно было что-то делать. 


Была создана организация, объединивигая широкие 
массы веб-дизайнеров и получившая название У\еБ 
З‘апаагаз Рго]еси (или УУа$Р, млм меБ${апдага5.оге) 
(рис. 1). Она убеждала основных: на тот момент про- 
изводителей браузеров привести свои сильно отлича- 
ющиеся программы в соответствие с «Рекомендация- 
ми», которые выпускал консорциум У/ойа Ме У’еь 
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Рис. 1 + Проект Ме З{апдагаз Рго]ес! 


ПРИМЕЧАНИЕ 


Консорциум \/ЗС заинтересован в развитии №. Занимаясь 
с 1996 года подготовкой рекомендаций, он стремится нахо- 
дить решения самых разнообразных технологических про- 
блем, возникающих в \еБ. 


Сопзоццит (\/3С). Стандартизация на основеединых 
спецификаций, разрабатываемых \/ЗС, вселила в ав- 
торов веб-контента чувство некоторой стабильности, 
Со временем веб-дизайнеры уже могли создавать стра- 
ницу со сложной НТМТ-разметкой, будучи уверены, 
что она будет выглядеть более-менее одинаково во всех 
браузерах и операционных системах. 


Многие спецификации, выпущенные \\ЗС, касаются 
архитектурных проблем и нетривиальных вопросов 
кодирования, с которыми среднему дизайнеру редко 
приходится сталкиваться, Тем не менее, начиная с пер- 
вого стандарта НТМЬЕ, принятого в середине 1990-х 
годов, \/ЗС подготовил целый ряд спецификаций, 
стремясь решать проблемы совместимости по-умно- 
му, так, чтобы неущемлять ни функциональности, ни 
доступности. 


Зачем нужны стандарты? 


В рабочие группы \УЗС входят специалисты из разных 
областей, которые собираются длятого, чтобы заблагов- 
ременно решать проблемы, о которых средний дизай- 
нер и думать никогда не должен. Цель состоит в выра- 
ботке набора рекомендаций, настолько продуманных, 
что разработчикам редакторов и браузеров остается 
лишь строго следовать спецификации. В результате же 
авторы контента и дизайнеры обретают уверенность в 
том, что их сайты можно будет просмотреть с помощью 
широчайшего спектра пользовательских агентов. 


Под «пользовательским агентом» мы, конечно, пони- 
маем браузер, но браузер, установленный на типич- 
ном настольном компьютере, — это лишь верхушка 
айсберга. По мере распространения портативных уст- 
ройств, таких, скажем, как мобильные телефоны, все 
больше пользователей станут просматривать веб-стра- 
ницы, не будучи привязаны к своему домашнему ком- 
пьютеру. Не все будут заходить в сеть с помощью ва- 
шего любимого браузера; просто потому, что не 
смогут. К примеру, для людей с физическими недо- 
статками существуют специальные программы для 
чтения с экрана или печати азбукой Брайля; есть и 
программы для увеличения изображения. 


Поскольку весь смысл выпуска спецификаций \!3С 
состоял в том, чтобы навести порядок в неразберихе, 
царившей в \\еЬ в 90-х годах, теперь вряд ли имеет 
смысл готовить разные версии сайта для разных 
пользовательских агентов. Все это было учтено в раз- 
личных рекомендациях, в частности НТМИ 4.01, 
ХНТМЕ, С$$ (каскадных таблицах стилей) и РОМ 
(объектной модели документа). 


Эти технологии были с восторгом приняты дизайне- 
рами и программистами, объединившимися в проекте 
У!еЬ ${апдага$ Рго}есг. Казалось логичным поддержать 
спецификации, которые гарантировали широчайшей 
аудитории доступность контента при сохранении кон- 
троля над визуальным представлением. Технология 655 
попала в самую точку, но вместе с тем это был совер- 
шенно новый подход к созданию веб-сайтов. Нетак-то 
просто оказалось убедить других дизайнеров в необхо- 
димости изучать С5$, и первые несколько лет нового 
тысячелетия ушли на то, чтобы понять, как этой мето- 
дикой пользоваться. 


Вот так обстояли дела в \\еБ, когда зародилась идея 
сайта еп Саг4еп, В то время С55 был в основном уде- 
лом программистов и кодировщиков, они прекрасно 
разбирались в технических нюансах, но макеты стра- 
ниц, выходившие из их рук, часто оказывались мини- 
малистскими, без искорки. Дизайнеры же в области 
графики не воспринимали идею С$$, поскольку не 
видели настоящих примеров С55-дизайна. 


Засеваем почву 


В конце 2002 года над этой проблемой задумался созда- 
тель сайта еп Сагаеп Дэйв Ши. Как далекие от изя- 
щества примеры могут вдохновить людей, способных 
создать с помощью С55 истинные шедевры: Посколь- 
ку у Дэйва был опыт и в кодировании, и в графике, то 
он сумел распознать потенциал С$5 в качестве языка 
дизайнера, И понял, что им пользуются не те люди, 
которые должны бы. 


В результате зародилась идея: а здорово было бы со- 
здать центральное хранилище лучших дизайнерских 
работ с применением С$$. Очевидно, недостаточно 
было просто собрать имеющееся, поскольку ничего 
вообще не было. Воодушевить дизайнеров на создание 
новых прекрасных работ — вот ключ к реализации 
идеи. Так были посеяны семена нового проекта. 


Влияния со с тороны 


Один из основателей проекта М!еь З{апдага$ Ргодеси 
Джеффри Зельдман (]еЁ тгеу етап) в 2002 году на- 
писал статью, в которой заклинал людей, понимаю- 
них выгоду разработки на основе стандартов \\е, не 
тратить время на убеждение других в достоинствах 
такого подхода, а просто начать применять его на прак- 
тике, Именно так все преимущества можно продемон- 
стрировать наиболее наглядно, поэтому фраза «Луч- 
ше один раз увидеть, чем сто раз услышать» стала 
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Рис. 2 + Примеры того, что можно сделать с помощью таблиц 
стилей, с сайта Оайу 65$ Рип 


| | Возникновение 


ПРИМЕЧАНИЕ 


Важно отметить, что стандарты \е6 — это не стандарты в тра- 
диционном понимании; никто не заставляет следовать им, и 
сам консорциум \/3С скромно называет их рекомендациями. 
’ Однако на практике многие считают их настоящими стандар- 
тами, пусть даже они не носят такого названия. Подробнее _ 
об этом см, статью «Мат 15 а Меб Збапдага» на странице 
млм ммебзтапдата$.ога/Биг2/агстуе/2004_10.И4т#а000463. 


ПРИМЕЧАНИЕ 


Найти текст оригинальной статьи Зельдмана можно на стра- | 
| нице ул, 2е1Чтап.сот/даЦу/0802с. Пт НЕуапдейпе, 


ПРИМЕЧАНИЕ 


| Проект баЦу 655 Рип размещен на сайте ммм. р[асепате- 
пеге.сот/пеигаи$титот/200202. 


заповедью проекта. Зельдман же в дальнейшем напи- 
сал авторитетное руководство по этой теме Деяентие 
ий Иер бшнаага$ (Меум Вет, 2003) («М/еБ-дизайн по 
стандартам»). 


В 2002 году Крис Качиано (Ст! СазШапо) основал 
проект под названием Райу С$$ Рип (Ежедневные С$5- 
приколы) (рис. 2). Идея заключалась в том, что на про- 
тяжении месяца Качиано ежедневно выкладывал но- 
вую таблицу стилей, которая весьма неожиданными 
способами представляла НТМГ-разметку. Он не на- 
зывал себя графическим дизайнером, но результаты 
его работы убедительно показывали, сколь многого 
можно достичь путем применения для верстки одной 
лишь технологии. С$$, 


Вследствие неослабевающей популярности браузера 
Ме{5саре Ма\ра{от 4, который плохо поддерживал С5$, 
все эти уроки оставались теорией — красивой, но дале- 
кой от практического применения в тогдашней \\еБ. 
Ситуация начала изменяться по мере резкого сокра- 
щения присутствия Ме[5саре Мамеагог 4 на рынке, к 
2003 году он «исчез с экранов радаров». Настало вре- 
мя идти вперед. 


Первые попытки 


Идея сайта еп Саг4еп созрела, и в мае 2003 года Ши 
поместил плоды своих трудов на собственный сайт 
угугиу лле22още.сотт, а затем довольно быстро перевел 
их в домен \/\/\.с$зтепеагаеп.согл, где сайт существу- 
ет и по сей день. 


В конце 2002 года Ши уже начал разрабатывать пред- 
варительные прототипы еп Саг4еп, пользуясь че- 
тырьмя разными таблицами стилей, выражающими 
идею четырех античных стихий: земли, воды, огня и 
ветра. В то время разработка не была доведена до кон- 
ца, и графика использовалась не слишком интенсив- 
но, Как видно из рис. 3—6, первые наброски еп Саг4еп 
не особенно впечатляли. 


Дизайн был скучным именно потому, что ему не хва- 
тало броской графики. Фоновые изображения были 
добавлены с помощью свойства раскагомп@-1таче. 
Поместить же изображения на передний план не пред- 
ставлялось возможным, Применениетега 11а лицтило 
бы дизайн гибкости, поскольку пришлось бы ограни- 
читься единственным набором изображений. Одна 
лишь фоновая графика не решала проблемы, так как 
дизайнеру часто нужно, чтобы картинки перемежались 
с текстом, а не просто находились под ним. Поэтому 
фоновая графика давала лишь частичное решение. 


_ Исходный текст 


Обходной путь был найден, когда Дуглас Боумен 
(Роиаз Вомтпап) опубликовал ставигую теперь зна- 
менитой статью «Использование фоновых изображе- 
ний для замены текста». Тогда-то все и стало на свои 
места; поместить картинки на передний план можно 
было, привязав их к различным текстовым элементам 
на странице и заменив графическими эквивалентами. 
Технология С$$ в совокупности с дополнительной 
настраиваемой разметкой позволяла заменить строч- 
ные текстовые элементы фоновыми изображениями — 
аналогично тому, как ведет себя тег 119 с подходя- 
щим атрибутом а1е. 


В апреле 2003 году началось серьезное планирование 
сайта Иеп Саг4еп. Был создан единый НТМТ--файл, к 
которому было применено пять разных вариантов 
дизайна (рис. 7- 11). 


ВАН 
Рис, 3 + Ранний прототип 7еп багдеп, земля 
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Рис. 5 + Ранний прототип Геп багдел, ветер 


ПРИМЕЧАНИЕ 


Прочитав оригинальную статью Боумена на сайте 5{ордез1дп 
(ммм. $ордеятдп.сот/агНс(ез/терасе_+ехе), вы поймете, что 
| у пропагандируемой в ней техники есть один недостаток - 
она плохо сочетается с доступностью. Но именно эта техни- 
ка применяется во многих вариантах дизайна 7еп багдеп. Под- 
робно мы рассмотрим ее в главе 4. 
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Рис. 6 + Ранний прототип 2еп багдеп, вода 


ПРИМЕЧАНИЕ 
Поскольку изменить НТМЕ-файл впоследствии уже было бы 
невозможно, авторы потратили немало времени на выверку 
разметки и текста, стремясь к тому, чтобы число элементов с 
уникальными значениями свойств с1азз и 1а было доста- 
точным для модификации с помощью таблиц стилей. После 
запуска сайта выявились некоторые проблемы с разметкой, 
которые нельзя было предвидеть заранее, —- мы поговорим 
об этом ниже. 
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Рис. 10 + #004, Четыре арки 
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Рис. 7 4 #001, Безмятежность 
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Рис. 9 + #003, Шторм 
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Рис. 11 + #005, Жажда крови 


20 Исходный текст 


Основной вариант дизайна — 
«Безмятежность» 


Хотя каждый из первых пяти вариантов дизайна внес 
важный вклад в успех проекта, однако только один 
вариант должен был постоянно оставаться на виду в 
течение длительного времени. В качестве основного 
варианта была выбрана утонченная, минималистская 
«Безмятежность», хотя на эту роль претендовал и ва- 
риант 002 «Плавленый сыр с лососем» из-за более яр- 
кой образности; к счастью, предпочтение все-таки 


было отдано «Безмятежности». АВ СРЕЕРСН | КЕМ 
Все изображения и текст в основном варианте дизай- МОРОВУТЧ Умхух | 


на, за исключением текста в самом теле страницы, 
были нарисованы в Адофе РВотозВор. Сначала пред- 


| абсае ат | 
полагалось, что тексты заголовков будут состоять из 
нарисованных вручную каллиграфических штрихов, 
но, потратив час на работу с кисточкой и тушью, Ши | порчу Е 
решил, что шрифт СаШртарЫс 421 от компании 


Визигеат подходит гораздо лучше (рис. 12). Рис. 12 + Образцы шрифта СаЙютгарью 421 


Китайским иероглифам присуща замысловатость и 
внутренняя красота, поэтому многие дизайнеры лю- 
бят дополнять ими свой замысел. Пытаясь уйти от 
типичной западной привычки вставлять бессмыслен- 
ный набор иероглифов для придания таинственнос- 
ти, Ши потратил некоторое время нато, чтобы иерог- 
лифы на вертикальном свитке, идущем вдоль левого 
края страницы, имели определенный смысл. И хотя 
идея была хороша, но результат все равно получился 
неслишком вразумительным: выбранные иероглифы 
означают «начало», «полный» или «целый» и «умение», 


Помните, как детьми вы развлекались, капая тушью на 
лист белой бумаги и дуя на кляксу через соломинку? 
В результате получалась черная древовидная фигурка, 
которую можно было перевести на мятую салфетку и 
представить как цветок. Дерево в правом верхнем углу 
страницы — это дань воспоминаниям о таких забавах. 
На рис. 13 показано, что оно прошло несколько этапов, 
Сначала простыми цветами был нарисован грубый эс- 
киз, а затем добавлено несколько слоев с деталями, Рис. 13 + Поэтапное рисование дерева 


Последствия 


Уже через несколько дней стали приходить варианты 
дизайна от посетителей сайта; за первую же неделю тра- 
фик вырос до нескольких тысяч посетителей в день. 
Люди вызывались добровольно перевести сайт на десят- 
ки других языков, Сразу стало понятно, что Деп Сагдеп 
сумел удовлетворить долго накапливавшийся спрос, для 
которого в УУеЬ не было никаких других предложений. 


| | Возникновение 3 


С тех пор сайт еп Саг4аеп упоминался в десятках жур- 
налов, издаваемых в разных странах, и во множестве 
книг, так что его канонический статус в истории веб- 
дизайна можно считать зафиксированным. Со всего 
света приходят благодарственные письма от дизайне- 
ров и разработчиков, которым с помощью этого сай- 
та удалось убедить своих работодателей, клиентов и 
коллег в ценности дизайна на основе С5$. А многие из 
тех, кто прислал свои работы, испытали резкое уско- 
рение в своем карьерном росте, ощутив мощное воз- 
действие сайта Геп Саг4еп. 


Хотя сайт Деп Саг4еп создан и поддерживается одним 
человеком, он тем не менее является плодом коллек- 
тивных усилий добровольцев. Своим успехом он обя- 
зан многим талантливым дизайнерам, приславшим 
свои работы. Каждый находит в еп Саг4еп что-то свое 
и, хотя этот сайт задумывался главным образом ради 
демонстрации ценности С$$ для целей дизайна, ноу 
него обнаружились и другие, заранее неведомые дос- 
тоинства. 


+ Дизайнерам, решающим проблему верстки, теперь 
есть куда обратиться, если что-то не получается; 
когда в одном месте собраны сотни работ, шансы, 
что кто-то раньше уже сталкивался с подобной за- 
дачей, весьма высоки. Использовать представлен- 
ные на сайте таблицы стилей в качестве образца для 
верстки допустимо и даже поощряется. 


+ Там же можно найти новые способы применения 
С55 и создания различных эффектов. Вполне ве- 
роятно, что среди сотен вариантов вы найдете для 
себя что-то новенькое. 


+ Это замечательный способ проверить поведение 
браузера. Весь код заведомо корректен и соответ- 
ствует стандартам, так что теоретически страницы 
должны одинаково выглядеть в любом браузере. 
(Напрактике так обстоит дело не всегда. Из-заоши- 
бок и отсутствия поддержки для некоторых элемен- 
тов в конкретном браузере дизайнерам приходит- 
ся учитывать возможные различия во внешнем 
виде, применяя для этого всяческие С$$-фильтры 
и уловки.) 


+ _ Именно сюда приводят работодателей и клиентов, 
когда хотят убедить их в пользе дизайна на основе 
стандартов. 


+ Это прекрасное лекарство от творческого застоя. 
Ничего не выходит? Загляните в поисках вдохно- 
вения, 


+ Этобиржатруда как для высококвалифицированных 
профессионалов, так и для начинающих дизайнеров. 


Работодатели и потенциальные клиенты регуляр- 
но обращаются к авторам понравившихся работ с 
предложением временного контракта или постоян- 
ной работы. Их произведения часто появляются на 
страницах книг и журналов. 


4+ Преподаватели находят этот сайт полезным инст- 
рументом для обучения современным методам веб- 
дизайна, 


Заложение фундамента 


Еще до составления таблицы стилей необходимо оп- 
ределиться с разметкой своей веб-страницы. Раз вы 
читаете эту книгу, то, наверное, слышали об отделе- 
нии структуры от представления, Для тех же, кому эта 
идея внове, скажем, что основное достоинство дизай- 
на на основе С55$ состоит в том, что таблицы стилей 
можно присоединить к имеющемуся хорошо струк- 
турированному документу, дабы сделать его визуаль- 
но привлекательным. 


Под форматированием веб-страниц долго понима- 
ли выбор нужных базовых элементов НТМЬ, в зави- 
симости от того, как они представляются. Если вам 
нужен был абзац с отступом, следовало поместить 
текст внутрь тега <51оскацоЕе>, чтобы создать поля 
с обеих сторон. У элемента <Б1оскапоЕе>, одна- 
ко, есть вполне конкретное назначение — подчерк- 
нуть, что фрагмент текста является цитатой; отсю- 
да и название. Применение этого элемента для 
выделения текста, не являющегося цитатой, просто 
ради создания отступа, означает неверный подход к 
задаче; ведь С55 позволяет сделать отступ для лю- 
бого элемента. 


Правильное структурирование документа - это, по 
сути дела, выбор подходящих элементов, причем ре- 
шение должно основываться на том, для чего элемент 
предназначен, а не на том, как он выглядит. 


Теперь целью становится перенос всего форматиро- 
вания в С$5-файл и использование НТМТ-разметки 
только для описания структуры. С$5$ — это язык ди- 
зайна, который накладывается на существующую 
структуру и позволяет визуализировать ее. Язык 
НТМЕ более не следует использовать для дизайна. 


Нуавсе-таки — что мы выигрываем, уделяя такое вни- 
мание правильности структуры? Вообще, что в этом 
контексте означает слово «структура»? 


| Исходный текст | 


ПРИМЕЧАНИЕ 


Чтобы понимать, какой элемент использовать в конкретной 
ситуации, нужно знать основы языка НТМ(. В качестве прак- 
тического руководства по разметке реальных документов мы 
рекомендуем книгу Дэна Сидерхольма «Решения на базе стан- 
дартов \\еБ: справочник по разметке и стилям» (\еБ З{апдага$ 
Зои оп: Маткир апа 5/е НапаБоок, Рпепа$ оЁ ЕО, 2004). 


ПРИМЕЧАНИЕ 


Какая разница между тегом <р> и элементом р? В некото- 
ром смысле они обозначают одно и то же, но есть тонкое раз- 
личие. Тег — это конкретный разделитель в языке НТМИ; <р>, 
<а1\> и </Боау> - все это теги. Элемент состоит из от- 
крывающего и закрывающего тега, между которыми обычно 
находится некоторый контент; исключение составляет, на- 
пример, тег <Бту />, одновременно являющийся открываю- 
щим и закрывающим, внутри него контента быть не может. 


Заложение фундамента 


Семантическая разметка 


Разница между двумя идеологическими подходами: 
кодирование ради нужного представления и кодиро- 
вание ради правильной семантики — может быть до- 
вольно тонкой, поэтому приведем пример. Следую- 
щий фрагмент можно назвать презентационной 
разметкой: 

<«Буе><Ьг> 

<5><ЕопЕ в12е="2">Наша семья</ЕопЕ></Ь> 

«БЕ><ЬгЕ> 

<Еопе в1хе="1">На фотографии Мэтт и Джереми. 

Как обычно, Мэтт корчит рожи. У нас не так 


много фотографий, где бы он этого не делал.</ 
ГопЕ> 


А вот тот же текст, размеченный семантически: 


<а1\у 1а="Еап Лу" 

<п3>Наша семья</Н3> 

<р>На фотографии Мэтт и Джереми. Как обычно, 
Мэтт корчит рожи. У нас не так много 
фотографий, где бы он этого не делал.</р> 
</@1 > 


Грубо говоря, элемент — это часть структуры, тогда как 
тег - лишь синтаксическая конструкция, позволяющая 
описать структуру. 


В первом примере все теги предназначены исключи- 
тельно для форматирования. Теги <Бхг> нужны для 
вставки пустого места между строками, теги <5>- для 
отображения текста полужирным шрифтом, а теги 
<ЕопЕ> - для задания размера шрифта. 


Во втором примере внешнему виду страницы не уде- 
ляется никакого внимания; упор сделан нато, насколь- 
ко хорошо элементы ИЗ и р описывают назначение 
каждого фрагмента на странице. Элемент р содержит 
собственно текст, а элемент 3 описывает заголовок, 
который в контексте всей страницы имеет уровень 3. 


Главное во втором примере- это то, что внешнее пред- 
ставление элементов на данном этапе несущественно; 
мы все равно переопределим его с помощью С55.Эле- 
менты выбраны только исходя из соображений адек- 
ватного описания контента, Именно в этом и состоит 
семантика НТМ(. — выбирать элементы, основываясь 
на их предназначении, а не внешнем виде. 


У семантического форматирования документа есть 
весомые преимущества, которые мы обсудим чуть 
ниже, А пока имейте в виду, что применять таблицы 
стилей следует к правильному, хорошо семантически 
структурированному документу. 


Исходный текст | | | 


Создание подходящей 
разметки 


Несуществует универсальных правил создания доку- 
ментов, поскольку все страницы различны и должны 
структурироваться с учетом своих особенностей. Но 
некоторые общие соображения по НТМГ-разметке все 
же можно высказать. 


Используйте РОСТУРЕ 


Включив в начало разметки тег ООСТУРЕ (тип доку- 
мента), вы сообщите браузеру или иному пользова- 
тельскому агенту, какой язык применяется для размет- 
ки документа, Каким бы языком вы ни пользовались, 
помещать в начало РОСТУРЕ - признак хорошего ПРИМЕЧАНИЕ 
тона, | 


Углубленное обсуждение вопроса об отделении структуры 
от представления см. в статье Роджера Йохансона (Кодег 
Зопапззоп) «Веуеортта имлЕВ МеЬ 5{апагаз», опубликованной 

на сайте 456 Вегеа З{тееЕ (ммм. 456бБегеазгее!. сот/4ии). 


Пример: 
<!РОСТУРЕ [Ем РУВЬЕС "-//ИЗСЛАПТРО ХНТМЬ 1.0 
ЗЕГ1СЕ//ЕМ" 
"ВЕЕр:/ Ими. м3 .ога/ТвихНЕт11/ОТО/х Нет 1- 
зЕкТСЕ .ава"> 


Задавайте язык и набор символов 


Указание естественного языка документа не менее 
важно, чем задание РОСТУРЕ. Если вам приходилось 
встречать страницы с «крокозябрами», которые на са- 
мом деле написаны на японском, греческом, суахили 
или каком-то другом языке, то вы знаете, что проис- 
ходит, когда автор документа забывает указать коди- 
ровку. Поскольку Соое и другие поисковые маши- 
ны фильтруют результаты по-разному в зависимости 
от языка запроса, то правильное указание кодиров- 
ки окупается и тогда, когда вы хотите, чтобы поис- 
ковая машина возвращала ссылку на ваш сайт, Под- 
робнее о кодировках символов мы поговорим в этой 
главе ниже. 


Примеры: 


< хи п8="В бер: //миум. м3 .ог9/1999 /хнеш! * 
хи :1апа="еп" > 


Говорит, что данный документ составлен на языке с 
15О-кодом еп, то есть на английском. 


<шебса НЕЕр-еди!1у="СопЕепЕ-Туре" сопбепЕ=”ЕБехе/ 
Не]; сЛагзес=аеЕ-8" /> 


Определяет кодировку символов для документа, в дан- 
ном случае ОТЕ-8. 


ПРИМЕЧАНИЕ 
Полный список элементов, включенных в схему ХНТМЕ 1.0, 
можно найти в разделе «ХНТМЕ 1.0 ВеГегепсе» на сайте 
М/З5споо [$ (ПЕр://мЗ5споо$.сот/хИ ет хи ет _геГегепсе. ар). 


Заложение фундамента 


‚. Присваивайте заголовки 


На каждой странице должен быть элемент < 1Е1е> 
с содержательным заголовком. Заголовки служат для 
описания ссылки, на которую в браузере установлена за- 
кладка, а поисковые машины повыитают приоритет клю- 
чевых слов, встречающихся в заголовке, поэтому во мно- 
гих случаях документ оказывается выше в списке 
найденных. По возможности каждой странице сайта сле- 
дует приписывать уникальный заголовок, который опи- 
сывает именно данную страницу, а не сайт в целом. 


Пример: 


<Е1Е1е>с35 йеп Сагаеп;: ТАе Веацеу 1п 255 
2е51а91</с1Е1е> 


Пользуйтесь подходящими 
элементами 


Мы уже касались этой темы, но нелишне будет повто- 
рить: используйте для разметки такие элементы 
НТМУ, которые описывают структуру документа, а не 
его внешний вид. Элемент р служит для выделения аб- 
зацев, а не для разбиения строки. Элемент 51 оскошосе 
нужен для оформления цитат, а не для формирования 
отступа, И так далее, 


Конечно, не все элементы НТМТ. вошли в схему 
ХНТМЕ. 1.0 ЗепсЕ В ней (а равно и всхемеХНТМ.. 1.1) 
меньше элементов, зато они служат более четко вы- 
раженным целям. Если не существует элемента, отра- 
жающего назначение структурной единицы в вашем 
документе, то стоит вспомнить об универсальных эле- 
ментах 41у или зрап. Но тут есть ловушка... впро- 
чем, читайте далыше, 


Пример: 
<ИйЗзътийе воаа со Еп1тайпееплепт</ПЗ> 
ане: 


<соЯе зЕу1е="ЕопЕ-812е: 1.бет"ътНе Воаа го 
Еп119йсепмете</соае> 


\. 


Избегайте чрезмерного 
употребления <а!\/> 


При использовании элементов ау и 5рап есть опас- 
ность переборщить. В небольшом. количестве и раз- 
мещенные в стратегически важных местах, они спо- 
собны существенно улучитить структуру документа. 


Исходный текст 


Если же их оказывается чересчур много, то стоит спро- 
сить себя, нельзя ли решить задачу с помощью более под- 
ходящих НТМ1-элементов. Например, никогда неследует 
пользоваться элементом 1х там, где более уместен ИЗ, а 
зрап не рекомендуется употреблять вместо 1аЪе1. 


Но это вовсе не значит, что от этих элементов надо 
отказаться. Несколько а1\ в подходящих местах до- 
кумента позволяют лучше контролировать стили и 
логически разграничить разделы. Считайте 1х по- 
вторно используемым контейнером: рассовывать кон- 
тент по слишком многим контейнерам неудобно, зато 
несколько удачно размещенных контейнеров помогут 
рассортировать контент так, как вам хочется. 


Пример: 


<Я1у 1Я="радеНеадет" > 

<й1>с=3 деп багаеп</01> 

<рй2>Тпе БеацЕу оЁ<асгопум Е161е="СавсаЯ1па 
5Еу1е эпееёз">С55</ 

асгопум> Без19п</И2> 

</А1\> 


Меньше разметки 


В предыдущих двух советах неявно присутствует 
мысль о том, что чем меньше разметки, тем лучше. 
Так оно и есть. Если вы хотите выстроить солидную 
конструкцию, то не надо загромождать ее разметкой. 
Используйте лишь те элементы, что необходимы, а все 
прочее отбросьте. Это позволит уменьшить размер 
файла (а, стало быть, и время загрузки), кроме того, 
браузеру будет проще интерпретировать файл и, зна- 
чит, он быстрее появится на экране. 


Пример: 


<р>ТНне деп Сбаг@аей а1тмз Ео ехс1Ее, 1пер1ге, ап@ 
епсоцгаде рагЕ1тс1раетоп.</р> 
а не: 


<Я@1 >. 

<р><врап с1азз="сехе">ТНе йеп Сагаеп айте Со 
ехс1Ее, 1пзр1ге, апа епсоцигаве 
рагЕ1с1раб1оп.</зрап></р> 
</а1\> 


Правильно пользуйтесь 
атрибутами с[а$$ и 4 


Если добавить к элементам идентифицирующие ат- 
рибуты, то позднее на них можно будет сослаться из 
таблицы стилей или из сценария на языке ]ауазстри. 
Атрибут с1азз © одним и тем же значением может 
встречаться у разных элементов на странице, тогда как 
каждое значение атрибута 1 в пределах страницы дол- 
жно быть уникальным. 


| | Заложение фундамента ва. 


У одного элемента может быть несколько классов, а один 
класс может применяться к нескольким элементам. Мож- 
но применить к элементу одновременно атрибуты 
сТазз и 19, но не забывайте, что наличие на странице 
более одного элемента с одним и тем же значением 14 
не допускается. Имена классов и значения идентифика- 
торов могут состоять из букв и цифр (а-7, А-7, 0-9), но 
не должны начинаться с цифры. И лучше считать, что 
те и другие чувствительны к регистру, хотя некоторые 
браузеры не обращают на это внимания. 


Три примера правильных идентификаторов: 
<Боду с1аз5="Помераде" > 
<р 1а="1пегоаосЕ10пщ"> 
<Ч1у 14="зесЕ1оп5" с1азз="Еор согпег 5011а"> 


Два примера неправильных идентификаторов: 
<зрап с1азв="16рхН1ан*> 


=Я1у 1а="Еообег"ъ<ату Тта="Еоокат"> 


Испытание временем 


Если вам доводилось писать документ, рассчитанный 
на сколько-нибудь продолжительное существование, 
то вы понимаете, как важно внимательно подойти к 
его составлению. 


Рассмотрим, например, издательское дело. Эта книга 
выдержала много правок и рецензий, нацеленных на 
то, чтобы проверить все факты и улучшить стиль. 
Поскольку книга обычно стоит накнижной полке куда 
дольше, чем веб-страница находится в кэше браузера, 
то всю эту работу надо проделать заранее, чтобы ру- 
копись оказалась безупречной. (Постучим по дереву!) 


В М!еБ таких ограничений нет, и это создает как удоб- 
ства, так и трудности, Сервер возвращает веб-страни- 
цу при каждом обращении со стороны посетителя. 
Обычно это означает, что вы можете вносить измене- 
ния в дизайн уже после публикации. При последую- 
щем посещении сайта можно увидеть эти изменения, 
книга же останется неизменной вплоть до переиз- 
дания. Искушение продолжить совершенствование 
сайта зачастую очень сильно, к досаде дизайнеров, 
подписавших контракт с фиксированным сроком 
действия. 


Хотя сайт Иеп Саг4еп и существует в УУеЬ, но у него 
есть особенности, из-за которых составление НТМЕ. 
для него оказалось ближе к написанию книги. Если бы 
было разрешено изменять разметку после того, как 
посетители начали присылать свои варианты, то все 
старые поступления оказались бы неработоспособны, 


Исходный текст 


и сайт перестал бы отвечать своему назначению. В ре- 
зультате модификации текста изменился бы размер 
документа, а макет страницы мог бы непредсказуемо 
«разъехаться». Любые структурные или визуальные 
изменения были бы пагубны, поэтому НТМЬ должен 
оставаться таким, как в момент запуска сайта. 


Исходный НТМЕ-текст 
сайта 2еп Сагаеп 


Считайте, что НТМГ-структура сайта Йеп Сагдеп так же 
неизменна, как текст книги, Она не изменится никогда, 
хотя улучшить ее можно было бы миллионом спосо- 
бов. Сам контент может быть слегка модифицирован, 
но основные НТМГ-элементы «высечены в камне». 


Наследующих нескольких страницах приведен исход- 
ный НТМЕ-текст еп Сагаеп, на который мы будем 
ссылаться в разных местах. 


Получить электронную копию можно также, зайдя на 
сайт \гмги’.сзхепоат4еп.сот и выбрав из меню пункт 
\УЛе\ $оигсе (Текст НТМГ.). Во всех основных браузерах 
она расположена примерно в одном месте: в меню Улем 
(Вид). Для простоты можно вместо этого найти на са- 
мом сайте еп Саг4еп ссылку на образец НТМГ.-файла. 


Излистинга изъяты комментарии, имеющиеся в ориги- 
нальном исходном тексте. Вместо них на полях приве- 
дены примечания к некоторым разделам, поясняющие, 
почему было сделано так, а не иначе. Если вы хотите 
увидеть оригинальные комментарии, зайдите на сайт. 


<! О ев ПЕ: вот ыы Я ТЕГ ЗчыыынЫ | 


«НЕМ хм пз="ВЕЕр: //мми. м3 .0г9/1999/хНЕт1"_ 
хм] :]апа="еп"“ > 
<ПеаЯа> 


са у="сопеепе-Еуре 


ит 


си - 


<теза пате="аиёНохг" сопёепЕ="Рауе 5Веа" /> 
<теса паме="Ккеумогаз" сопеепе="аее19п, с83, 
сазса@1па, эЕу1е, знееёз, хНЕм1, дгарВ1с 
Чез19п, м3Зс, меь всапдаг@а5, у154а1, а1ер]ау" /> 
<тера пате="Чезсе1рефоп"” сопбепе= 

"А аетопзсгае1оп оЕЁ ипаЕё сап Бе ассотр115пеа 
\1вца11у ЕВхгоцав С55-БазеЯ дев1от." /> 
=песа  пате="тоБосв* сопеепе="а1]" /> 


<Е161е>с55 Реп Сагаеп: Красота С$5-дизайна</ 
Е1Е1е> 


' Для удобства читателя НТМГ-текст переведен на русский язык, 
хотя на всех снимках экрана представлен оригинальный анг- 
лийский вариант. — Прим: пер, 


Элемент РОСТУРЕ необходим ля описания типа до- 
| кумента, См. раздел «Используйте БОСТУРЕ» выше в 
этой главе. 


Задание примененной в документе кодировки симво- 
лов исключительно важно в глобальной среде, како- 
вой является Всемирная паутина. Подробнее см. раз- 
дел «Кодировки символов» ниже в этой главе, а более 
широкое обсуждение этой темы можно найти в статье 
Джоэля Спольски (ое! $ро[$Ку} «ТНе АБзоше Мпттит 
‚ Емегу 5оЯмаге Оеуеорег АБзо|иКе(у, Роз ме[у МизЕ Кпо\м 
АБоцЕ Утсоде апа СПагасфег 5е{$ (№ Ехсизе5!)» на сайте 
ммм. оеопзомаге.сот/агсез//птсоде. Пти. 


| Заложение фундамента И 


Этот пустой элемент зск1рЕ нужен для того, чтобы 
обойти одну ошибку в МусгозоЁ Тп{егпе! Ехр[огег для 
М пдоуз, См. статью «Назй оп {ед Сопеепь» на сайте 
Вше Коро (ммм. БшегоБо{. сот/меБ/с$5/Роис.азр). 


Этот метод импорта таблицы стилей уже не является 
необходимым, раньше он гарантировал, что №е{саре 
Мамтдафог 4 не будет пытаться применить внешний 
($$-файл вместо отображения простой нестилизо- 
ванной разметки. См, статью Эрика Мейера (Епс Меуег) 
«ТисКто Втомзет$ ап@ Н1пд 5/е5» на странице 
ум, епстеуегопс$$.сот/Бопиз/{йск-Пае. Нет. 


Идентификатор (атрибут 1 а) в элементе оу называ- 
ется С55-сигнатурой. Пользовательская таблица стилей | 
может переопределить все или некоторые стили на стра- 
нице в зависимости от указанной сигнатуры. См. статью 
«[с55-4] 65$ чапашитез» (ИИр://агс\м$АпсиНо.сот/ 
ем 1<\/с5$-415си55/13291). 


Поместив логически связанные группы элементов в 
отдельные а1 ли, мы упростим и сделаем более гибким 
процесс верстки. 


Всегда стремитесь к простоте. Хотя люди, желающие 
внести свой вклад в Геп багаеп, наверняка понимают, 
как загрузить файлы с примерами, имея эти ссылки | 

| (щелкнуть правой кнопкой мыши и выбрать из контек- 
стного меню пункт 5аме А$ (Сохранить как)), но те, кто | 
просто проявляет интерес к коду, могут этого и не знать. | 
По электронной почте продолжают приходить письма 

| с вопросами, как сохранить эти файлы. Это означает. 
лишь, что ваша аудитория состоит не только из тех, на 
кого вы рассчитывали. 


Наверное, было бы разумнее закончить здесь элемент 
#1исго @1м и поместить #ргеамЬ1е внутрь 
#зиррогЕлпаТехе. Длина раздела #ргеатЬ]1е на- 
водит на мысль о том, что его место в более крупном 
| блоке текста, составляющем основное содержание стра- 
НИЦЫ, а не во введении. С точки зрения позиционирова- 

ния и применения стилей это тоже обеспечило бы до- 
| полнительную гибкость. 


<5Еу1е реа меЯ1а="а11"> 


Ев ТТИ СЕ 


теч 
</пеа@> 


<б1\ 14="“солтазаег"> 
<а1\ 14="1пего"> 


<11><зрап>с$$ еп Сбагаеп</врап></и1> 
<й2><зрап>Красота <асгопум 
Е1Е1е="Каскадные Таблицы стилей"> 
С$5</асгопущ>-дизайна</зрап></В2> 
</Я1/\> 


<а1\ 19="“аалтскЯщшиатау" > 

<р с1аз5="р1"><эрап>Демонстрация того, 
чего можно достичь в плане визуального 
представления в дизайне на основе <асгопут 

с1Е1е=*Каскадные таблицы стилей*“>С$5</ 
асгопут>. Выберите любую таблицу стилей из 
списка и посмотрите, как будет выглядеть 
страница.</зрап></р> 


В 


зитё образец. 


«р Сс1аз5="ра" ><врап>Загру 
<а НгеЕ="2епдагаеп-ваптр1е, Вет!" 
Е1С1е="Исходный НТМГ-код этой страницы, не 
модифицировать. ">НТМЬ-файла</а> и 
<а НтеЕ="сепдагаеп-ватр1е.с55" 

Е16]е="Образец С55 для этой страницы, 
этот файл можно модифицировать. ">С55-файла</ 
а></врап></р> 

</А1\> 


ре к ява ЛЕЗЬ 
<р с1азв="р1"><врап>Обочина темной и 
унылой дороги усыпана останками зависимых от 
браузеров тегов, несовместимых моделей 

<асгопум #11е="Росимепе ОБ]есе 
моае1" >БОМ< /асгопут> и некорректно 
реализованной поддержки <асгопуй 
Е11е="СазсаЯ1п9 5Еу1е знееёз">Сс$5</ 
асгопут> .</врап></р> 


С о | Исходный текст | 


<р с1азз="р2"><врап>Ныне мы должны п ЕЕ: ох а | ь 
еданты могут возразить, что \/3С — это аббревиатура, а 
очистить свой ум от прошлого опыта, Прозрение еА увозразеть, ра 4 


снизошло на нас благодаря неустанным усилиям не акроним, Это действительно так, ив АТМ. есть эле- 
людей из ЗЕНИТЕ ООО ОО мент аЪЪх для такого рода сокращений, но Тлёегпеё 
’СопвогЕ т = Ехрогегего не поддерживает, так что многие пользуются 
</асгопум>, <аскопум Е1е1е="Меь зкапдаказ элементом асгопущ, который поддержан повсеместно. 
Рго]есе">ИабР</асгопут> и создателей основных — 

браузеров. </эрап</р> 


<р с1азз="р3"><врап>еза деп Сагаеп 
приглашает вас отдохнуть душой и поразмышлять 
над важными уроками мастеров. Пусть снизойдет 
на вас просветление. Научитесь пользоваться 
проверенными временем (впрочем, это еще 
впереди) методами по-новому. Станьте частью 
Всемирной паутины. </взрап</р> 

</Ч1\> 


</Ч1\у> 


<Я1\у 14="виррогЕлпаТехе"> 
<а1у 1а4="“ехр1апаЕе1оп"> 
<И3><врап>О чем этот сайт?</врапъ</НЗ> 
<р с1аз5="р1">Существует очевидная 
необходимость в том, чтобы художники-графики 
всерьез восприняли идею <асгопум Е1Е]е= 
"“СазсаЯ1п 5Еу1е бнееез">С$$</аскопум>. 
Цель сайта деп Сагаеп - пробудить в них 
энтузиазм и призвать к участию. Для начала 
ознакомьтесь с уже существующими вариантами 
дизайна, которые перечислены в списке. Выбор 
любого варианта приведет к загрузке этой же 
страницы, но с другой таблицей стилей. 
Разметка остается той же самой, меняется лишь 
внешний „.сзв-файл. Честное слово. 
</зрап></р> 


<р с1азз="р2"><асгопум 1Е1е="Сазсаап9 
5Еу1е бНееЕз">С55</асгопут> обеспечивает 
полный контроль над стилем гипертекстового 
документа. Единственный способ доказать 
истинность этого утверждения, так, чтобы у 
зрителя осталось глубокое впечатление, - 
показать, чего можно достичь, когда 
инструментом пользуется человек, способный 
превратить голую структуру в произведение 
искусства. На сегОдЕя Сольшинство трюков 
демонстрируют "стру 1 


Нет, мы не знаем, что означает слово «структурщик». 
Когда писался этот текст, существовала настоятельная | 
потребность провести четкое различие между теми, кто 
пишет код, и теми, кто размечает НТМ!-документы. Но 
почему такая потребность возникла, мы уже не помним. 


лепту. Такое положение дел должно Ея 
изменено. </врап></р> 
</а1\> 


<Я1\у 1а="раге1с1рас1оп" > 

<П3><зрап>Приглашение к участию</врап></Н3> 

<р с1азз="р]1"><5рап>Рады приветствовать 
всех художников-графиков, Раз вы собираетесь 
модифицировать эту страницу, необходимо 
глубоко разбираться в технологии <асгопум 
Е1Е1е="Савса91п9 56Еу1е бНнееев">С85</асгопупь, 
но файлы с примерами достаточно хорошо 
прокомментированы, так что даже начинающие 
пользователи <асгопум Е121е="Савса@а1та 5Еу1е 


ЕН | | Заложениефундамента 19. 


В английском оригинале встречается апостроф, который 
представлен в виде последовательности &#8217;. Это код. 
символа для настоящей типографской одиночной кавыч- 
ки (‘') вместо прямого апострофа ("), который обычно‘ис- 
пользуется в качестве замены. В Меб поддерживается | 
множество типографских символов и соглашений, этим 
надо пользоваться при малейшей возможности. См. ста- | 
тью «Тпе ТоцЫе ул ЕМ'п ЕМ (ап Оег Ваду Спагасветз)» 
| на сайте ммм аб$Сара.сот/аг(ез/етеп, 


Требования к присылаемым работам изменились вслед- 
‚ ствие непредвиденно большого числа предложений, 
Прежде чем отправлять свое произведение, ознакомь- 
тесь с «Инструкцией для авторов» на странице | 
ммм. тег2оие.сот/ 2епдатдет/з ит /дитде тез. 


снееё5">С85</асгопум> смогут взять их за 
отправную точку. Посетите <а ВгеЕ="ВЕср:// 
млм. пеххоб1ие. сом/хепдакаеп/гевомтсев/" с11е= 
"Список относящихся к С$55 ресурсов»> 
Руководство по ресурсам, посвященным <асгопум 
Е1Е1е="Савса 19 Збуфе бнеесв">С5$5</аскопумьо/ 
а>, где вы найдете ссылки на подробные 
руководства и сборники советов о том, как 
работать с <асгопум Е1Е|1е="СавсаЯ11 56у1е 
Зпеегз">С$55</асгопум>.</врап></р> 

<р Сс1азв="р2"><врап>Вы можете модифицировать 
таблицу стилей как угодно, но не трогайте 
<асгопуш 61Е1е="НурегТехЕе Магкир 

Гаполаде" >НТМЬ< /асгопут>-разметку. ТИ1в мау 
зеем ЧациЕ1па аЕ Е1езЕ 1Ё уоцЕ# 8217: уе пеуег 
уогкеяа Еб1в мау Беёбоге, Бае Е011ом ЕНе 11эееа 
11пКк6 со 1еагп моге, апЯ ве Сйе замр1е Е1Тез 
аз а ч41ае'.</врап></р> 


<р сфазв="р3“><зрап> Загрузите образец <а 
ВгеЕ= "хепдагаепт-заир]1е.НЕт1" (1Е1е="Исходный 
НТМЬ-код этой страницы, не 
модифицировать, ">НТМЬ-файла</а> и <а 
НгеЕ="гепдаедеп-ваир1е. свв" #1Е1е="Образец С55 
для этой страницы, этот файл можно 
модифицировать, ">С55-файла</а>; чтобы работать 
локально. Закончив свой шедевр (пожалуйста, не 
присылайте незавершенные работы), разместите 
.с55-файл на веб-сервере, который вы можете 
контролировать. <а ВхеЁ="Неср:// 
улик . тег2ор1ще, сом/хепдагаеп/ ватт Е/" с161е=“С 
помощью этой фрны можно ПВ, нам о своем 


 разиещен на нашем сервере. ее , 


</а1\> 


<Я1\у 14="БепеЕ1Е 8" > 
<Н3><5рап>Выгоды</зрап></НВ3> 
<р с1аз5="р1"><врап>Зачем нужно 
становиться участником проекта? Чтобы о вас 
узнали, чтобы припасть к источнику вдохновения 
и чтобы было на что сослаться, когда речь 
зайдет о дизайне на основе <асгопуп 
Е1Е1е="Савсаа3 па 5еу1е $НВееёз">С$5</аскопут>. 
А это ой как необходимо, даже и сегодня. Все 
больше крупных сайтов переходят на эту 
технологию, но их еще мало, мало... Когда- 
нибудь наша галерея станет историческим 
курьезом, но пока этот день еще не настал.</ 
зрап></р> 
</а1у> 


<@1\у 19=“теаи1гетейссь“> 
<й3><зрап>Требования< /зрап></П3З> 
<р с1аз5="р1"><врап>Мы хотели бы, чтобы 


В тексте книги переведены вселистинги сайта, однако здесь они 
оставлены в оригинале, чтобы проще было понять работу сапо- 
строфами. - Прим. пер. 


Исходный текст 


таблицы стилей по возможности соответствовали 
спецификаций <аскгопум (1е1е="Сазса@119 5еу1е 
бНеесз, уегз1оп 1">С951</асгопут>. Применение 
<асгопум ©121е="базсаЯ1па сеу1е зипеесе, 
уегв1оп 2">С$52</асгопут> следует ограничить 
только ней которые реке ой 


В главе 7 вы увидите, как можно поэкспериментиро- 
вать с продвинутыми С55-эффектами, «подсунув» в то 
же время старым браузерам урезанную таблицу сти- 
| лей. В некоторых вариантах дизайна эта идея нашла 
воплощение, так что требования к поддержке со сто- 
роны браузера можно было бы сформулировать так: | 
«На ваше усмотрение». 


| оабОЗазн которое мы прельявняеы! ЭРО 
корректность вашей таблицы стилей. </врап></р> 


<р с1азв="р2"><врап>К сожалению, при 
таком подходе к дизайну выявляются ошибки в 
различных реализациях <асгопут ЕТЕТе= 
"СазсаЯ$пч 56у1е эвееЕв, уегетой 1">С551</ 
асгопуи>. Иногда разные браузеры отображают 
одну и ту же страницу по-разному, несмотря на 
то что таблица стилей абсолютно корректна. 
Особенно досадно, когда после исправления 
одной ошибки перестает работать что-то другое. 
На странице <а ВгеЕ=“ВеЕр: //ммимез2об1ще. сом/ 
гепдагЯеп/тезоигсев" Е1Е1е="Список относящихся 
К С95$ ресурсов">Ресурсы</а> есть информация о 
некоторых ошибках и способах их обхода, Полное 
соответствие браузера спецификации все еще 
остается несбыточной мечтой, и мы не ожидаем, 
что ваш код будет отображаться на всех 
ипатформах Е с точн стью са пикселя. 


Хотя присланные работы часто проверяются в разных 
браузерах перед размещением на сайте 7еп багдеп, все 
‚же тестирование входит в обязанности автора. Если 
вы заметите погрешности в макете страницы, помните, 
что работы приходят со всего света. Иногда у автора 
просто нет доступа к тем браузерам и операционным 
системам, с которыми работаете вы. 


т , мые: е. приме [</врап></р> 
=р с1азз= ттт просим присылать 
только оригинальные работы. Уважайте законы об 
авторском праве. Старайтесь свести к минимуму 
объем спорных материалов - показанная со 
вкусом обнаженная натура приемлема, откровенная 
порнография будет отвергнута.</врап></р> 


<р с1авз="р4"><зрап>Этот сайт - в равной 
мере выставка и учебный класс. Вы сохраняете 
все авторские права на свою графику (с 
немногими исключениями, перечисленными в <а 
ВгеЁ="умм.мехсоБ1ще. сот/хепдагаент/ ци е/ 
9у1Че11пез/">ъинструкции авторам</а>), 
публиковать свою таблицу стилей-мы просим на 
условиях лицензии «а НгеЕ="Всер:// 
сгеас1уесопмоп8 .ога/11сепсез/за/1.0/" 
Е161е="Лицензия, действующая на сайте 2еп 
Сагаеп" >Стеае1уе Соптопе</а>, чтобы другие 
люди могли чему-то научиться у вас.</врай></рь 
<р с1аз5="р5"><5рап>Костинг любезно 
предоставлен компанией <а Пгеё="В сер: // 
уму, агеатЕ1кезЕцато8. сот/*>ОгеатЕР1хге Збоа1о5 
<Га>. Купите <а ВхеЕ="/Боск/">Книгу</ 
а> !</врап></р> 
</а1\> 


Заложение фундамента Е 


Перечень ссылок в разделе #Еоогег - это список. .. | 
так почему бы не воспользоваться для его разметки эле- | 


ментом 1? Риторический вопрос -— надо было бы офор- 
мить их в виде какого-то списка. 


В первоначальной разметке 2еп багаеп вместо элемен- 
| тов 11, окружающих каждую ссылку, использовались 
зрап, но автоматизированные службы проверки дос- 
тупности типа ВоББу (НЕр://БоББу матеЯте.сот) со- 
чли это ошибкой, Дополнительные пробелы &п5эр; в 
конце каждой ссылки -— это следы неудачной попытки 
обойти проблему; очень скоро зрап были заменены 
списком, но уже ненужные &пЬзр; так и остались, 


2 Зак. 1942 


у\уа11Чдасог/снеск/геЕегег" Е1Е1е="“Проверить 
корректность С55 на этом сайте">С55</а> &пЬзр; 

<а НееЕ="ВЕбр: //сгеастуесоттой8.ога/ 
11сепсез/Бу-пс-за/1.0/" Е1Е1е="Ознакомиться с 
лицензией для этого сайта, с разрешения 
Сгеаб1уе Сомлопе.">сс</а> &пЬвр; 

ха птеЕ="Ьеер: //боБбу масспЕтте. соп/ 
БоББу/БоббБубегу1 ее ?ов=ВЕСр* ЗА СЕ 2Римм. 
шеххор} че, сом%2Ехепаагаеп%*2Ейапр; онерие= 
зим Е апр; 91=3ес508&атр; Сезё=" 
Е1Е1е="Проверить доступность этого сайта 
согласно 0.5. Зесезой 508">508</а> &пбер; 

«а пгеЁ="Аесре//БоББу маеснЕ1тге.сом/ 
БоББу /БоББубехгу1ее ?9ВЬ=ПЕЕр®ЗАъ2Е%2Еимм, 
мехгоЬ] це. сот 2Ехепдагает2Екатр; оНЕрие=ЗиЬттЕ 
катр;91=нсад-ааайатр; сезс=" Е1Е1е="Проверить 
доступность этого сайта согласно Рекомендациям 
по доступности. контента ИАТ">ааа</а> 

</@1\у> 


</атм> 


<а1\у 1а=" акте" > 
&а\му за="1апкга ве" 


=91\ 1а="1ве1есь"> 
<Н3З с1азз="ве]1есе"><врап>Выберите 
дизайн: </зрап></НЗ> 


<> 
<11><а Нгеё="/" Е1Е1е="АссеззКкКеу: а" 

ассеззкКеу="а">Пример 1</а>, автор 
<а НгеЕ="НЕЕр: //мми. мехроБ1ае.сол/" 
с1азз="с">Дэйв Ши</а>йабер;</11> 
<]1><а ПгеЕЁ="/" Е1Е1е="АссеззКеёу: Ъ" 
ассевзкеу="Ь">Пример 2</а>, автор 
<а Нее ="НЕСр: //ммм. пеггоь1шще. сом/" 
с1авв="с">Дэйв Ши</а>&пЬвр;:</11> 
<11><а ВгеЕ="/" Е1Е1е="АссевзКеу: с" 
ассеззкеу="с">Пример 3</а>, автор 
<а НгеЕ="НЕЕр: //ммм. меххоБ1 це. сот/" 
с1азз="с">Дэйв Ши</а>&пЬзр;</11> 
=11><а ВгеЁ="/" Е1Е1е="АссеззКеу: а" 
ассеззКеу="9">Пример 4</а>, автор 
<а ПкгеЁё="ВЁЕЕр: / /ммм. мессо61ие. сом/* 
с1азз="с">Дэйв Шиз/а>&пЬзр; </11> 
<11><а ПгеЁ="/" Е16]е="АссевеКеу: е" 
ассевзКкеу="е">Пример 5</а>, автор 


«а ИгеЕ="НЕЕр;: //мум. пехгоБ1ще. сом/" 


с1авв="с">Дэйв Ши</а>ёлЬзр;</11> 
<11><а НгеЕ="/" Е11е="АссевзКеу: ЕЁ" 
ассеззКеу="#Ё">Пример 6</а>, автор 


к 3. | Исходный текст | Е 


<а НгеЁ=*Неср: / /ммм.мехроь1 ще, сом/ " 
с1азз="с">Дэйв Ши</а>&пЬер;</11> 
<11><а НгеёЁ="/" Е1Е1е="АссезвКеу: с" 
ассеззкеу="9">Пример 7</а>, автор 

<а НгеЕ="ВеЕЕр: //миум. мезгоь1чще. сом/" 
с]азз="с">Дэйв Ши</а>&пЬзр; </11> 
Е161е="АссеввкКеу: ПН" 


| Клавиши доступа (ассеззКеу) упрощают навигацию по 
сайту, но этой технологии присущи некоторые недо- 
статки. См. статью «И$1тпд АссезКеуз — 1$ № мой К?» 
(Стоит ли пользоваться клавишами доступа?) на стра- 
нице ул. ма{$.са/агсез/ассез$Кеу5/19, 


с1азз="с">Дэйв Ши</а>&пЬзр;</11> 
</\11.> 
</а1\> 


<Я1\у 1Я="]агсВтуев"> 

<13З с1авз=*агсН1уез" ><врап>Архивы: </ 
врап></Н3> 
<> 


Теперь, когда накопилось больше 100 вариантов дизай- 
| на, такой метод перебора выглядит смешным и неле- 
| пым. Гораздо полезнее ссылка на весь список вариан- 
тов (ммм. теггоБ ше. сот/2епдаг4еп/ае$19п5). Но 
часто не замечают даже того, что есть. Многие полага- | 
ют, что у сайта Геп багаеп всего восемь вариантов ди- 
зайна, и не заглядывают в архивы. Не повторяйте эту 
ошибку! 


о ы неетале гасное" Е ле = 1 
БА вы ыы. ый 9 В ный ых р 


<11><а НгеЁ="/" Е161е="Предыдущий набор 
вариантов дизайна. 

АссевзКеу: р" ассезвкеу="р">&1ааоо; 
<врап с1азз="ассеззкеу">р</врапьргеу1ое 
Чез1ап5</а></11> 

=11><а НгеёЁ="ВЕЕр: //мим. мехгоБ1ще. сот/ 
хепдагаеп/а11Чез1апв" 61Е1е="Все варианты 
дизайна еп Сагаеп. АссеззКеу: м" 
ассеззКкеу="и">\/1е<врап с1авв="ассеввкеу">и</ 
зрап> А11 

дев1ап8=/а></11> 

</\11> 
= /а1\у> 


<а1у 19="]1гевоцгсев"> 

<НЗ с1аз5="гезоцтсев" ><зрап>Ресурсы: </ 
зрап></В3> 

<111> 


Хотя пункт меню \Лем/ $оитсе известен всем, кто сколь- 
ко-нибудь долго работал в \еБ, но новички часто при- | 


| сылают письма с просьбой сказать, как просмотреть 
Е Ся (5$-файл для конкретного дизайна. Поэтому вскоре 
о Е А Е | после запуска сайта я добавил эту ссылку. 


<11><а Нргеё="мим. пехсоБ]ще. сощ/ 
гепдагаеп/гезоигсез" Е16]е= "Ссылки на сайты, 
посвященные работе с С55. АссезвКеу: г" 
ассеззкеу="г"><аскопум 51(1е="Сазсаапа 56у1е 
ЗНееЕс">С55 

</асгопут><врап с1аз5="ассеввКкеу" >В</ 
зрап>езоиксев</а></11> 

<11><а НгеЁ=“мими, пехсоБ1ще. сом/ 
гепдагаеп/Еаа" Е1Е1е= "Перечень часто 
задаваемых вопросов о беп Сбагаеп. АссеззКеу: а" 
ассеззкеу="а"><асгопум 611е="ЕгеааепЕ1у 
АвкеЯя ОцевЕетоп8е">РА<врап с1азз=“ассеввкеу“>0</ 
зрап> 


| | Заложение фундамента 


8 некоторых вариантах дизайна эти пустые элементы 
| 91 у и =рап служат для добавления графических изоб- 
ражений, которые почему-либо неудобно присоединять 
к остальным элементам. Считайте, что это повторно ис- 
пользуемые элементы 1та. 
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Рис. 14 + Визуальное руководство Энди Кларка 
по структуре разметки сайта 7еп багдеп 
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</асхопут></а></11> 

<11><а НгеЕ="умти. теххоБ1ие. сом/ 
зепдагаеп/ваБм1е" 6161е= "Присылайте свой 655- 
файл. АссеввКеу: 5" ассеввкеу="а*> 

<врап с1авв="ассезаКкеу">5=/зрапъи Бе а 
Безтап</а></11> 


=11><а ВгеЁ="мии. пезхоБ1че. сом/ 
хепдаг4еп /Егапз1а 1оп3/"” 61Е1е="Посмотреть 
версии этой страницы на других языках. 
АссеззкКеу: Е" ассеззКеу="Е"><врап 
с1ав5="ассезвзкеу">Т 
</взрап>гапз]аЕтопв</а></11> 
</11.> 
<{91> 
</а1\> 
</атм> 


</аг\у> 


НЕ 


ВЕ ая |0 


+ 4= “ехсгар1у2 ареал <> 
1а="ехсгар1 3 "><врап></зрап></а1у> 
19="ехега01/ё * >-<врап></врап></Я9\ > 
1Я="ехЕга01у5"><врап></врап></ат\у> 
1Я="ехсга0\\6" ><врап»</врап></91\> 
</Боау> 

</ПЕт]1> 


Визуальная структура 


Дизайнер Энди Кларк (Апау СагКке) создал визуальное 
руководство по структуре разметки сайта Йеп Сат4еп 
(рис. 14). На рисунке прекрасно видно, как различные 
элементы вкладываются друг в друга; он очень поле- 
зен в качестве отправной точки для изучения разметки 
сайта. См. также сопроводительную статью Кларка «30 
С$5$ Геп Сагдеп» (Трехмерная визуализация сайта С$$ 
Геп Сагдеп) (муум. зи ЕРГап4попзет$е.со. аК/агсуе$/ 
34_с5$_геп_ваг4еп.№т). 


Гибкость дизайна 


С самого начала одной из основных целей при состав- 
лении разметки было обеспечение гибкости для созда- 
ния различных вариантов дизайна. Необходимо было 
вставить в разметку достаточно много адресуемых 
элементов, чтобы внешний вид каждого можно было 
при необходимости модифицировать. Без дополни- 
тельного кода выбрать отдельный элемент на страни- 
це было бы невозможно. Селекторы потомков допус- 
кают следующий общий способ адресации элементов: 
аазскбыющаеку р { 


со1ог: геа; 
} 


К 9 Исходный текст 


Но при этом все элементы р внутри раздела 
#ап1скбиллагу становятся красными, А если нуж- 
но модифицировать только второй абзац внутри 
#а1скбилмаку? Если не приписать каждому пара- 
графу уникальный класс, то единственный способ ре- 
шить эту задачу состоит в применении синтаксиса се- 
лекторов, появившегося в 6552: 
наотскбитмату > р+р ( 
со1ог; геа; СОВЕТ — 


Подробнее о селекторах в (552 можно прочитать на сайте \\3С 


фаиаскбиттагу > р+р+р { в статье «5 Зеесфогз» (ммм. м Зс.ога/ТВ/С5521/зееског. Пет). 
со!ог: 1пНнег1С; = „ ы 


} 


Поясним: первое правило содержит комбинацию се- 

лекторов дочерних и сестринских элементов и озна- 

чает: «Применить это правило к любому элементу р, 

которому непосредственно предшествует другой эле- 

мент р и который также является дочерним элемен- 

том #аитскбаштагу». Иными словами, это все абза- 

цы внутри #ац1скбитмтмагу, кроме первого. Поэтому 

второе правило вводит дополнительное условие, от- 

меняя применение первого ко всем абзацам, перед ко- 

торыми имеется не менее двух предшествующих аб- СОВЕТ. 
зацев, из которых первый должен быть дочерним 
элементом #ал1скбипимаку; иначе говоря, для всех 
абзацев, кроме первых двух, восстанавливается уна- 
следованный стиль. 


Подробнее о селекторах в (553 можно прочитать на сайте 
\!ЗС в статье «Зеесфог$» (млм мЗс.отгд/ТВ/с5$3-зеесог$), 


Уф! Пожалуй, слишком много путаницы ради просто- 
го выбора элемента. К счастью, в С$$53 это можно сде- 
лать гораздо проще: 


СОВЕТ - 


Прекрасным инструментом для расшифровки сложных селек- 


#фчиаскбимтагу р:пёй-св11а(2) { торов (5$ является 5е\ес{ОКасе компании ОРАЕ бтоир (ВЁр:/ 
со1ог:; геа; 


} 


/даЦегу 1Пеора[дтоир.сот/ зе[есёогас(е). 


Но ни один из этих способов не работает в Ицмегие! 
Ехр|огег! Так что можете на время забыть о них, если 
только нет жесткой необходимости использовать 
стиль, который большая часть аудитории не увидит. 
Конечно, в течение следующих нескольких лет пред- 
почтения публики могут измениться, но пока Пиегпе! 
Ехр|огег занимает примерно 90% рынка. 


Разговор о сложных селекторах в С$$ увел нас до- 
вольно далеко от простой задачи. Но теперь долж- 
но быть ясно, зачем нужны дополнительные клас- 
сы: они обеспечивают максимальную гибкость 
дизайна, Причины для включения в разметку «лиш- 
них» элементов зрап такие же: наличие внутрен- 
них элементов в каждом абзаце расширяет возмож- 
ности применения стилей. 


| | Заложение фундамента 


ПРИМЕЧАНИЕ 


Как быть, если целью дизайна как раз является обеспечение 
гибкости? В некоторых проектах действительно необходима 
гибкая стилизация, и довольно часто задают вопрос, как мак- 
симально полно задействовать потенциал стилей в собствен- 
ной разметке. 


Вполне можно начать с методов, применяемых в 2еп багдеп, 
если только пользоваться ими с умом. Мы рекомендуем для 
начала ограничиться набором самых основных элементов 
НТМЕ и с их помощью описать контент: абзацы, заголовки, 
списки и т.п, По мере необходимости включите в стратеги- 
чески важные места дополнительные контейнеры а1у суни- 
кальными идентификаторами 1 @ и добавьте к некоторым эле- 
ментам имена классов. Встречающиеся в 2еп багдеп элементы 
ъурап, наверное, вам не понадобятся, пользуйтесь ими толь- 
ко, когда возникнет необходимость. 


Подстановка изображений 


У элементов зрап есть иеще одно назначение, Когда 
проектировался сайт Йеп Саг4еп, умами дизайнеров 
во всем мире как раз овладела совершенно новая идея: 
если имеется заголовок (скажем, НЗ) и вы хотите за- 
менить текст в нем изображением, то этот текст необ- 
ходимо окружить двумя элементами. Один из них ПЗ, 
а другой - враг. 


Если скрыть текст внутри зрап, например, за счет пра- 
вила ат =р1ау: попе, то останется только НЗ, с кото- 
рым можно связать фоновое изображение, создав тем 
самым иллюзию графического заголовка. Поскольку 
у каждого элемента в (еп Саг4еп имеется внутренний 
зрап, то открываются широкие возможности для эк- 
спериментов. 


А зачем вся эта суета, спросите вы? Разве с помощью 
элемента 1ща нельзя сделать то же самое? Ответ все 
тот же: гибкость. Радикально изменить внешний вид 
страницы за счет подмены таблицы стилей не удалось 
бы, будь изображения «зашиты» в НТМТ-код. Впро- 
чем, у техники подстановки изображений есть свои 
проблемы, о которых мы еще поговорим ниже. 


Упрощение разметки 


Некоторые решения принимались, исходя из знаний, 
имевшихся натот момент. В результате в разметку было 
введено больше структурных элементов, чем необходи- 
мо в свете появления новых приемов, Нетрудно найти 
места, откуда можно было бы убрать лишние элементы. 


С момента запуска 7ел Саг4еп стало возможным под- 
ставлять изображения без дополнительного зрап, так 
что большинство этих элементов больше не нужны. 
И избыточные классы не используются в 98 процен- 
тах присланных работ, так что и от них можно было 
бы слегкостью отказаться. Набор пустых а1у и зрап 
в конце документа нужен только ради дополнитель- 
ных адресуемых элементов, которыми дизайнер мог 
бы воспользоваться. 


Очень может быть, что для других сайтов такие эле- 
менты не понадобятся. В Деп Саг4еп на них возложе- 
на весьма специфическая функция — обеспечить мак- 
симальную гибкость. Но настолько вариативный 
дизайн нужен далеко не каждому сайту. 


Если вы захотите воспользоваться НТМЁ-разметкой 
Геп Саг4еп (а мы не возражаем. против этого), то не 
забывайте, что одна из важнейших целей дизайна на 
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основе стандартов — устранить лишние элементы, 
Включить один-другой Я1\ для обрамления логичес- 
ки связанных элементов вполне допустимо, но окру- 
жать эрап каждый абзац и каждый заголовок на стра- 
нице, пожалуй, чересчур. Ниже в этой главе мы еще 
вернемся к обсуждению вопроса о структурировании 
документа. 


Что мы уже знаем 


Главная миссия сайта Геп Саг4еп — продемонстриро- 
вать, на что способен дизайн на основе стандартов; 
знакомство с различными дизайнами показывает, на- 
сколько гибкие возможности представления дает С5$. 
Сам по себе С$5 — это язык дизайна, служащий допол- 
нением к таким языкам разметки, как НТМЕ, ХНТМЕ. 
и ХМГ. Спецификация С$$1 появилась в 1996 году, а 
($52 — в 1998. В браузеры постепенно вводится под- 
держка для той и другой, так что начиная с 1998 года 
стало принято управлять всеми типографскими осо- 
бенностями представления с помощью внешнего С55$- 
файла. И на этом роль С5$ и ограничивалась в тече- 
ние последующих четырех или пяти лет. 


Легко понять, почему С$$ использовался лишь для 
управления шрифтами - ведь только это и поддержи- 
валось одинаково всеми браузерами. Впрочем, даже и 
с этим они справлялись не очень хорошо, но у такого 
способа было одно весомое преимущество, из-за ко- 
торого большинство дизайнеров готовы были приме- 
нять С55 несмотря ни на что. 


Преимущество состояло в том, что все документы на 
сайте могли ссылаться на один и тот же С$5$-файл. Если 
задать гарнитуру шрифта в таблице стилей, то соот- 
ветствующее объявление будет применено ко всем 
страницам. Стоит изменить вид или размер шрифта 
всего в одном файле, как это отразится на всем сайте. 


Это было существенно лучше применявшейся ранее 
методики, когда тег <ЕопЕ> приходилось ставить 
перед каждым нуждающимся в выделении элементом 
документа на всех страницах сайта. В результате на 
каждой из сотен страниц могло оказаться по семь-во- 
семь таких тегов. Изменение шрифта выливалось в 
длительную и мучительную работу. 


Этот тип отделения представления был лишь малой 
толикой того, на что способны таблицы стилей, Реди- 
зайн сайта стал на много порядков проще, поскольку 
для переноса текста из старого дизайна в новый уже 
не нужно было выискивать и заменять тысячи тегов 
<ЕопЕ>, разбросанных по разным файлам; достаточ- 
но было скопировать контент, а таблицы стилей сде- 
лали бы все остальное. 


Что мы уже знаем 


Но долгое время этим все и ограничивалось. Старые 
браузеры, плохо поддерживающие С$$ и не позволяв- 
шие применять более сложные стили, оставались на 
компьютерах пользователей в течение многих лет пос- 
ле предполагаемого срока замены, так что делать что- 
то более продвинутое просто не имело смысла. 


Наконец в начале нового тысячелетия поддержка со 
стороны основных браузеров улучшилась до такой сте- 
пени, что можно было всерьез рассматривать задейство- 
вание потенциала (55 в полной мере, Конечно, она 
была (да и до сих пор остается) несовершенной, но все 
же достаточна, чтобы применение С$$ не сводилось к 
замене шрифтов. После нескольких лет интенсивного 
сотрудничества веб-дизайнеры во всем мире вырабо- 
тали надежные методы работы с имеющимися стиле- 
выми средствами, позволяющими верстать страницы 
с использованием плавающих элементов и модели по- 
зиционирования. Были найдены и обходные пути для 
браузеров, не вполне соответствовавших стандартам. 


Так где же мы сейчас находимся? Даже в 2005 году еще 
есть браузеры, не до конца поддерживающие специ- 
фикацию С$$2, хотя она вынтла в свет в 1998 году. Но 
в общем и целом поддержка достаточна для того, что- 
бы достоинства С$$ и дизайна на основе стандартов 
стали осязаемы и начали приносить плоды. 


Приглядимсяк этим достоинствам внимательнее. Ско- 
рее всего, вы о них уже знаете, коль скоро читаете эту 
книгу, но если вас интересуют детали, советуем обра- 
титься к источникам, упомянутым в разделе «В. зак- 
лючение» в конце книги, 


Достоинства стандартов \\еБ 


Говоря о стандартах \!еЬ, следует представлять себе 
целиком всю картину, включая как. 55$, так и язык 
НТМЬ, применяемый для структурной разметки. 
Трудно перечислить достоинства одной технологии 
без упоминания другой. Выигрыш получается лишь 
тогда, когда обе они применяются совместно: содер- 
жание и структура документа описываются с помо- 
щью НТМУ, а дизайном управляют таблицы стилей. 


Варианты дизайна, размещенные на сайте еп Сагаеп,— 
доказательство того, что один и тот же НТМТ.-файл 
можно визуализировать бесчисленным числом спосо- 
бов, если применить к нему разные таблицы стилей. 
Технология С55 — это метод представления докумен- 
та путем применения различных стилей к его струк- 
турным элементам. Хотя они применяется к структу- 
ре, но работает независимо от нее, позволяя создавать 
различные визуальные образы документа. 


К исходному документу предъявляется лишь одно тре- 
бование: он должен быть правильным и достоверным. 
Неправильно размеченные документы будут прорисо- 
вываться непредсказуемо, что вызовет массу проблем. 
Поэтому при поиске причин ошибок в результате при- 
менения С55 первым делом проверьте, что разметка 
успешно проходит контроль на правильность. 


Файлы меньшего размера 
загружаются быстрее 


Когда средства представления выносятся из разметки в 
таблицы стилей, размер файла обычно уменьшается. 
30 Кбит, уходивших ранее на разметку, вполне могут 
превратиться в 10 Кбит на НТМЕ. плюс 10 Кбит или 
меньше на С5$. 


Помимо уменьшения размера самого файла, есть иеще 
один источник оптимизации — С55 кэшируется в па- 
мяти браузера. Судите сами: когда НТМГ--разметка за- 
нимала 30 Кбит, при каждой загрузке страницы необ- 
ходимо было передать эти 30 Кбит плюс собственно 
контент документа. При просмотре десяти страниц сай- 
та приходится без нужды загружать целых 300 Кбит. 


Если же вынести дизайн во внешний С$$-файл, то, во- 
первых, уменьшится размер загружаемой страницы, 
аво-вторых, таблицы стилей не придется грузить при 
просмотре каждой страницы. Останется лишь 10 Кбит 
НТМГ-разметки на страницу, поскольку остальные 
10 Кбит, приходящиеся на С55, будут извлекаться из 
кэша браузера. Таким образом, вместо вышеупомя- 
нутых 300 Кбит накладных расходов нужно будет заг- 
рузить всего 110. 


Такое уменьшение «веса» страницы за счет ее «разре- 
зания» может положительно сказаться и на конечных 
пользователях, и на работе сервера. Если трафик ве- 
лик, то сокращение числа передаваемых байтов мо- 
жет весьма заметно сэкономить полосу пропускания. 
Веб-сайт спортивной сети Е5РМ перешел на С$$ в нача- 
ле 2003 года, и приводимые цифры звучат просто фан- 
тастически. В интервью, которое впервые было опуб- 
ликовано на несуществующем ныне сайте РеуЕ4ре 
компании МеЁзсаре (его можно найти по адресу 
мм пикет 1е;.сотл/ов/агсуе/2003/06/езрп- 
ицегулем) разработчики ЕЗРМ,сот сообщают, что 
ежедневная экономия составила 2 терабайта. А это зна- 
чит, что теперь сайт может обслуживать больше по- 
сетителей и делать это быстрее — только за счет изме- 
нения технологии разметки. Неплохая отдача на 
единовременные затраты. 
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ПРИМЕЧАНИЕ 


Программа контроля правильности НТМ(-разметки находит- 
ся на странице Ма Чаёе Усцг Магкир сайта М3С (ИЕр:// 
ма датог. м3 .0тд). 


ПРИМЕЧАНИЕ 


Соображения о повышении пропускной способности приме- 
нимы только в случае, когда таблицы стилей выносятся в от- 
дельный файл; можно разместить их и в самом НТМ(-докумен- 
| те, но тогда, в отличие от внешнего (55-файла, они не будут 
кэшироваться, так что часть преимуществ будет утрачена. 


Что мы уже знаем а. 


Большая переносимость 


Вообще-то для прорисовки правильно структуриро- 
ванной страницы даже и таблица стилей не нужна. 
Иногда это имеет прямой смысл — рассчитывая на 
большой монитор с разрешением 1024х768 пикселей, 
вы имеете в своем распоряжении достаточно места, 
чего не скажегть, когда речь идет о карманном компью- 
тере с экраном 240х320 пикселей. 


Без С$$ «голый» контент вполне можно читать, ссыл- 
ки работают, и все элементы формы функционируют 
как положено. Так что, ограничившись структурной 
разметкой и больше ничего не делая, вы автоматичес- 
ки получаете версию своего сайта для мобильных ус- 
тройств. 


Но С55 предлагает поддержку для разных типов уст- 
ройств и позволяет точно указать стиль, применяемый 
для вывода на конкретное устройство. Компьютерно- 
му монитору, мобильному устройству (скажем, сото- 
вому телефону) и принтеру соответствуют разные 
типы устройств. На самом деле их даже больше, при- 
чем некоторые еще только разрабатываются. . 


ПРИМЕЧАНИЕ 


Типы устройств, поддерживаемые (55, описаны на странице 
«7 Ме{а Турез» сайта \МЗС (ммм, м3 .0т9/С5521/тефа.НЕт). 


Таблицы стилей для печатных устройств выносят 
смертный приговор ссылочке Рги\{ ТЬ15 Разе (Распе- 
чатать страницу). Любую страницу сайта можно рас- 
печатать, и для этого нужна лишь простая таблица 
стилей, которая форматирует одни элементы, прячет 
другие и строит макет с учетом особенностей принте- 
ра. Поскольку принтеры накладывают иные ограни- 
чения, нежели экран, то тонкий контроль, предлагае- 
мый таблицами стилей, весьма желателен. 


Теоретически когда-нибудь для каждого устройства 
вывода будет определен подходящий тип. На практи- 
ке же сейчас найдется мало людей, пользующихся для 
просмотра веб-страниц чем-нибудь, кроме экрана (не 
исключая авторов страници производителей обору- 
дования). Реализуемые с помощью С55$ средства уп- 
равления отображением! на`экранах сотовых телефо- 
нов редко заходят дальше настройки шрифтов и 
цветов, а браузер для устройства типа аига|! (голосо- 
вое воспроизведение) еще не написан, 


Это классическая проблема курицы и яйца: поддерж- 
ка не улучшится, пока не появится контент, но никто 
не станет готовить контент для несуществующего ус- 
тройства. Однако хотя и медленно, но изменения про- 
исходят, так что, возможно, мы еще увидим вариант 
7еп Саг4еп, стилизованный для сотового телефона 
или КПК. 
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Улучшенная доступность 


Правильно структурированная НТМГ--разметка дос- 
тупна уже на стадии проектирования; вы можете со- 
здать версию сайта, на 90 процентов удовлетворяю- 
щую рекомендациям \/3С по доступности контента, 
просто за счет корректной разметки. 


Попрощайтесь с текстовыми вариантами контента и 
несколькими версиями сайта, которые так трудно 
синхронизировать; им на смену приходит единствен- 
ный вариант верстки. В большинстве случаев даже 
пользователи с ослабленным зрением, которым при- 
ходится пользоваться программами, воспроизводя- 
щими содержимое веб-страницы голосом, смогут 
воспользоваться вашим сайтом - безо всяких усилий 
с вашей стороны, 


Тут, конечно, есть и подводные камни, и мы немного 
поговорим о них в следующей главе, когда будем об- 
суждать, какие проблемы с точки зрения доступности 
может создать применение С$$. 


Точный контроль 


Будучи языком стилизации, С$$ предлагает широ- 
кое разнообразие способов форматирования, кото- 
рые в НТМЕ были попросту невозможны: точное 
задание интерлиньяжа (расстояния между строка- 
ми текста) с помощью свойства 1 1 пе-Ве1 две, рас- 
стояния между элементами с помощью свойств 
пагд1пт и раЯа1п9, позиционирование элементов 
на странице с помощью абзо1аЕе и ге1а 1\уеи 
многое другое. 


Если вам всегда не нравилась сеточная структура, дик- 
туемая таблицами, то возрадуйтесь: С$5-позициони- 
рование позволяет избавиться от нее и располагать 
элементы в любом месте страницы. Если вам хотелось 
управлять фоном точнее, чем возможно с помощью 
одного лишь цвета и повторяющейся картинки, то 
свойство Баскагоцпа и примыкающие к нему ста- 
нет для вас маленьким открытием. 


Чему мы научились 


Не бывает идеальных сайтов, и Геп Саг4еп — не ис- 
ключение. Теперь уже поздно возвращаться к началу 
и что-то менять, но в ходе дискуссий на протяжении 
нескольких прошедших лет возникло новое понима- 
ние, которым хотелось бы поделиться. 


ПРИМЕЧАНИЕ 


Рекомендации по доступности веб-контента находятся по 
адресу угл. м3 .отд/ТВ/\МАТ-ММЕВСОМТЕМТ. 


ПРИМЕЧАНИЕ 


ВоББу (ВЕЁр://БоББу масИАге.сот) — онлайновый инстру- 
мент проверки доступности. Есть и другие, например Суп та 


Зауз (м\мим.супЕНТазау$. сот) и \МеБАТМ'$ Мауе (ВЕЁр:// | 


уауе.меБатт.отд). 


Чему мы научились 


Проверка доступности 


Проверка составленной разметки с помощью про- 
граммы ВоБЪу показала, что большинству критериев 
доступности она удовлетворяет. Перед запуском 
сайта пришлось внести несколько мелких измене- 
ний, чтобы устранить замеченные ВоБЪу недостат- 
ки. В хвостовик еп Саг4еп была добавлена метка 
«ААА» как свидетельство того, что о доступности 
позаботились. 


А так ли это? Оказалось, что ВоБЪу — еще не оконча- 
тельный авторитет в вопросах доступности. Озна- 
комившись с «Рекомендациями по доступности веб- 
контента», опубликованными УУЗС (см. раздел 
«Улучшенная доступность» выше), вы поймете, что 
кое-что ВоББу проверить просто не в состоянии, Так, 
пункт 2.1 гласит, что вся информация, доносимая с 
помощью цвета, должна быть доступна и при про- 
смотре на устройстве, не поддерживающем цвета. 
Но программа типа ВоЪБу не может этого подтвер- 
дить, особенно если цвет является частью графичес- 
кого изображения, 


Вообще, если внимательно изучить сайт ВобЪу, то 
обнаружится следующий текст с отказом от ответ- 
ственности: «Доступность -это в конечном итоге воп- 
росчеловеческих способностей. Она определяется тем, 
может ли группа людей с определенными ограниче- 
ниями легко получить доступ к информации. ВоЬБу — 
всего лишь попытка помочь разработчикам сделать 
веб-страницы более доступными, но полной доступ- 
ности эта программа гарантировать не может». 


Часто задаваемые вопросы: Вр://БоББу. мае Яте.сотп/ 
БоБЪу/антИеп/ач.}зр#Гаа_опе{оо). 


Таким образом, сайт Хей Сат4ел прошел все провер- 
ки доступности, относящиеся к НТМТ-разметке, но 
существуют аспекты, с НТМЕ не связанные. Некото- 
рые относятся и к С55, и со временем стало ясно, что в 
некоторых вариантах дизайна они не приняты во вни- 
мание. Когда втлаве4 мы будем обсуждать метод под- 
становки изображения Фарнера, то увидим, как легко 
с помощью С$$ создать проблемы, которые никакой 
автоматический инструмент не обнаружит. 


Урок таков: автоматические средства проверки типа 
ВоББу могут служить в качестве отправной точки для 
создания доступных сайтов, но в «Рекомендациях» 
есть много не менее важных пунктов, которые с их 
помощью проверить нельзя. 


Исходный текст 


Масштабируемость текста 


Одна из проблем С$$, относящаяся к доступности, — 
что делать при изменении размера текста. Очень хо- 
чется выбрать шрифт поменьше, чтобы на экране по- 
местилось больше информации. Все мы знаем, как 
мало места на экране, так что основания для такого 
решения имеются. 


Проблема в том, что многие люди просто не могут 
читать текст, набранный слишком мелким шрифтом. 
Для некоторых нечитаемым является шрифт высотой 
12 пикселей, а иногда даже 24 пикселей недостаточно. 
Разумеется, учитывая невысокую разрешающую спо- 
собность современных мониторов, никто не станет 
делать дизайн со тприфтом высотой 24 пикселя, по- 
этому нужен какой-то компромисс, 


К счастью, во всех современных браузерах имеется 
механизм изменения размера шрифта. Не все пользо- 
ватели знают, как до него добраться, но для знающих 
его ценность неоспорима, Неприятность возникает в 
том случае, когда размер шрифта выражен в едини- 
цах рх. Пиегпе( Ехрогег умеет масштабировать приф- 
ты, если единица измерения еп или $, но в случае рх 
он бессилен, 


Поэтому пользователь, увы, не может рассчитывать 
на помощь со стороны браузера, и проблема остается. 
Но ведь дизайнеру надо просто отказаться от едини- 
цы рх, и все будет в порядке, не правда ли? Возможно. 
Однако в главе 5 обсуждается совсем другая пробле- 
ма, которая может возникнуть в случае использова- 
ния единиц еп и %. 


Но даже если текст успешно масштабируется во всех 
браузерах, это еще не все. Дизайн должен учитывать 
возможность масштабирования (рис. 15). На первый 
взгляд, ничего сложного, но если вы будете переме- 
жать элементы фиксированного размера (скажем, 
фоновую картинку высотой-20 рх) с элементам пере- 
менного размера (например, текст, высоту которого 
браузер изменил с 14 до 24 пикселей), то быстро обна- 
ружите, что макет начинает «плыть», когда размер 
шрифта отличается от того, что ожидал дизайнер. 
Большинство вариантов дизайна еп Саг4еп протес- 
тировано с этой точки зрения и может масштабиро- 
ваться на размер, несколько больший принятого по 
умолчанию. 


Важно понимать, что какой бы размер шрифта вы ни 
выбрали для текста, всегда найдется некто, желающий 
его увеличить. Нужно помнить о том, с какими про- 
блемами придется столкнуться, когда текст становит- 
ся крупнее, и учитывать их при верстке страницы. 
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Рис. 15 + Текст масштабируется, а изображения 
и пропорции - нет 


ПРИМЕЧАНИЕ 


На сайте А [1${ Араг размещена дополнительная информация 
о ХНТМ! и различных значениях БОСТУРЕ (млм\м.ай${арак.соту/ | 
ам1с(ез/Чосфуре). 


ПРИМЕЧАНИЕ 


Парочку статей, в которых типы МТМЕ описываются более 
подробно, можно найти на сайтах \Меь 5фапдага$ Ргоесе 
(ммм, ме ${апдага5.ога/еатп/ а5Км3с/5ер2003.НЕт[) и ХМИ. сот 
(млм. хт(.сот/риБ/а/2003/03/19/Ч1уе-тфо-хт(. Вт). 


— 
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Рис. 16 + Результат ошибки в структуре ХМ(-документа 


Чему мы научились 


ХНТМЕ и типы МИМЕ 


Сайт (еп Саг4еп в момент запуска соответствовал спе- 
цификации ХНТМЬ 1.1. В конце концов, раз уж раз- 
метка прошла проверку на совместимость с ХНТМЕ 1.1, 
то почему бы не использовать ее вместо более старой 
спецификации ХНТМУ, 1.0 ${пс8 


Кстати говоря, ХНТМЕ. - это не просто требование пра- 
вильно закрывать теги. Даже если при проверке оказы- 
вается, что ХНТМГ-код абсолютно корректен, то техни- 
чески страница не будет считаться ХНТМГ-документом, 
если для нее неправильно указан тип МПМЕ. 


М1МЕ (МшШиригро$е Пцегпе: Май Ежепя1юоп5 — много- 
целевые раситирения электронной почты) - это стан- 
дарт для описания информации, и единственная при- 
чина, по которой вы должны о нем знать, состоит в 
том, что правильный тип ММЕ для ХНТМГ-докумен- 
тов- это арр]11сае1оп/хЬет1+хи1. Можно указы- 
вать и гораздо более распространенный тип сехЕе/ 
ВЕта1, но только в контексте спецификации ХНТМЕ 1.0 
Тгапз юпа! или в том случае, если вы хотите, что- 
бы документ, удовлетворяющий спецификации 
ХНТМЕ. 1.0 $11 был обратно совместимым. Воз- 
вращать документ, составленный в соответствии со 
спецификацией ХНТМЕ 1.1, как тип СехЕ /НЕм1 
нельзя, ему обязательно должен быть приписан тип 
МТМЕ, говорящий, что это ХМГ-документ. 


Задание нужного типа МИМЕ для возвращаемого доку- 
мента сводится к необходимости изменения формиру- 
емых сервером заголовков, например, с помощью кон- 
фигурационных файлов .Пбассез$ или НЕЕра. сопЕ. 
Если вы не понимаете, о чем речь, это не ваша вина. 
Для непосвященных это слишком технический вопрос, 
имеющий отношение к администрированию сервера. 


Но даже выяснив, как задать правильный тип МИМЕ, 
вы еще отнюдь не решили всех проблем. Только са- 
мые последние версии браузеров поддерживают тип 
арр11саб1оп/ хм 1+хм1, поэтому нужен какой-то 
способ вернуть им и только им документ правильно- 
го типа, а для всех остальных указать более старый и 
привычный тип ММЕ. 


Далее, коль скоро вы укажете правильный тип МИМЕ, 
браузер вызовет для вашего документа синтаксический 
анализатор ХМГ. А в ХМЕ есть правило, гласяцтее, что 
при обнаружении любого несоответствия, например 
отсутствующего тега < /р>, следует прекратить разбор 
и вернуть сообщение об ошибке, Тогда вы не увидите в 
браузере даже частично прорисованного документа 
(рис. 16). ХМГ-документ обязан быть правильным, и с 
этим ничего не поделаешь — ошибки не прощаются. 


_ 46. Исходный текст 


Стоит ли ХНТМЬ таких сложностей? Но ведь суть 
ХНТМИ. как раз в том и состоит, чтобы преобразо- 
вать НТМЬЕ в одно из приложений ХМГ.. Поэтому не- 
которые считают странным использовать ХНТМЕ и 
не сообщать браузеру, что это настоящий ХМТ-до- 
кумент. Преимуществ у такой «честности» почти нет, 
но, если быть педантом, то это необходимо. Если вы 
не хотите связываться со всеми этими проблемами, 
то вы не одиноки. Многие широко известные в мире 
дизайнеры, ни секунды не колеблясь, отправляют 
ХНТМЕГ-документы, описывая их типом сехе /ВЕм1. 
Так что вы оказались в неплохой компании; вот толь- 
ко избегайте ХНТМИ, 1.1, придерживаясь одного из 
вариантов спецификации ХНТМЕ 1.0. Можно и во- 
обще уйти от этой проблемы, оставаясь на уровне 
НТМЕ 4.01, сопоставляя документу тип Сехё /НЕм1, 
но при этом соблюдая правила ХНТМГ.. 


Теперь вы знаете, что ХНТМЕ прост только на пер- 
вый взгляд, а при попытке использовать его в ре- 
альных приложениях вас поджидает масса неприят- 
ностей. 


И ностранные языки 


Было время, когда написать на компьютере документ 
нена английском языке (в предположении, что живе- 
тевы ванглоговорящей стране) было почти невозмож- 
но без специальных программ. 


К счастью, нынешнее программное обеспечение с по- 
ниманием относится к существованию других языков. 
Лучшим подтверждением тому может служить Все- 
мирная паутина, в которой число неанглоязычных 
сайтов стремительно растет. | 


Чтобы расширить аудиторию, Деп Саг4еп обратился 
к добровольцам с просьбой перевести сайт на другие 
языки (ии. теггоБше.сога/2епеаг4еп/тап анопз). 
По мере появления переводов обнаружились новые 
проблемы. Для работы с другими языками нужно СОВЕТ 
иметь некоторое представление о кодировках сим- 
волов. Кроме того, перевод -— это скорее искусство, 
чем наука. 


Подробнее о кодировках символов можно узнать на странице 


ммм ме ${апдаг4з, ота/еагп/а$Км3с/9ес2002. т. 


Кодировки символов 


Современные операционные системы прекрасно уме- 
ют работать с неанглийскими символами. Базовая 
инсталляция У/шдо\м5 ХР или Мас О$ Х не всегла 
включает весь набор естественных языков, но на уста- 
новочном диске имеются языковые пакеты, позволя- 
ющие отображать многие иностранные символы. 


Чему мы научились 


Однако возможность видеть иностранные шрифты — 
это всего лишь половина дела. Копирование и встав- 
ка текста из какого-либо источника в НТМТ-документ 
будет работать, только если кодировки совпадают. Так, 
текст в кодировке 511ЕЕ_715 (японский) не будет 
правильно отображаться в документе с кодировкой 
цЕЕ-8 (Ошсо4е). Важно убедиться в том, что коди- 
ровка НТМГ-документа соответствует тому тексту, с 
которым вы работаете. 


Кодировку можно задать на уровне сервера для всех стра- 
ниц сайта. Но даже в этом случае следует указывать 
кодировку в самом документе с помощью тега мега: 


<пеЕа НЕеср-еча1у="сопЕепе-Гуре" сопЕепе="Еехе/ 
№Ем1; спагзее=180-8859-1"/> 


На сайте Геп Саг4еп применяется кодировка 130- 
8859-1, стандартная для большинства европейских 
языков. В переводах используются другие кодировки, 
и, какмы теперь понимаем, правильнее всего было бы 
во всех случаях пользоваться кодировкой ОТЕ-8. 


ОТЕ-8 — это вариант популярной международной 
кодировки Ошсо4е. Преимущество ее в том, что в 
одном документе могут сосуществовать различные 
наборы символов, например из французского, япон- 
ского, арабского и греческого языков. 


Единственное препятствие на пути птирокого распрост- 
ранения этой кодировки в \У!еЬ состоит в отсутствии 
поддержки со стороны устаревших серверных программ 
и редакторов, не рассчитанных на многоязычность. 
У современных браузеров таких ограничений нет, так 
что пользователи никаких проблем испытывать не 
будут, все дело в сервере. Крометого, при работе сази- 
атскими языками использование ОТЕ-8 приводит к со- 
зданию файлов большего, чем реально необходимо, 
размера из-за сложного набора символов, поэтому 
если документ написан в основном на китайском, то 
лучше применять менее универсальную кодировку. 


Итак, благодаря поддержке нескольких языков коди- 
ровка ОТЕ-8 является предпочтительной для исполь- 
зования в УУеЬ при наличии соответствующих инст- 
рументов. 


Расхождения в переводе 


Поскольку переводом еп Саг4еп занимаются добро- 
вольцы, качество не всегда одинаково. Носители язы- 
ка часто присылают замечания с предложениями, как 
исправить ошибки; очевидные грамматические и ор- 
фографические ляпы устраняются легко, но вот с за- 
меной слов возникают проблемы, 


Исходный текст 


Тут даже профессиональные переводчики не помотут, 
ведь человеческие языки не взаимозаменяемы. Одну 
и ту же фразу можно перевести по-разному в зависи- 
мости от опыта переводчика и культурного контек- 
ста. Например, когда мы говорим «Тра{ мШпеуег Пу», 
имеется ли в виду неудачная идея или неисправный 
самолет? ЕпирМептеп{ (нирвана или облегчение) —это 
идея дзен-буддизма или методика избавления от лиш- 
него веса? Контекст может устранить двусмыслен- 
ность, но только в том случае, когда он правильно 
понят. 


Человеческий язык не такой точный, как компьютер- 
ный, поэтому от этой проблемы никуда не деться. 
Лучшее, на что можно рассчитывать, — это согласие 
между многими носителями языка. Но примите во 
внимание местные диалекты и различия, накопивити- 
еся с течением времени (американцы, например, пи- 
шут со]ог, а англичане — со!оиг), и станет понятно, что 
даже такое согласие достижимо с трудом. Особенно 
если вы не говорите на соответствующем языке! 


Таким образом, перевод документа — непростая зада- 
ча, и достичь совершенства тут никогда не удастся. 
Поэтому на сайте еп Сат4аеп мы с легким сердцем 
поместили заявление о том, что ошибки возможны, и 
мы готовы с ними смириться. 


Авторское право и воровство 


Сайт еп Сагдеп - не только выставка, но еще и ис- 
точник вдохновения и знаний. Однако это палка о двух 
концах: стоит поделиться своими знаниями, как обя- 
зательно найдется кто-то, желающий получить боль- 
ше, чем вы согласны отдать. 


С самого начала было объявлено, что все присылае- 
мые работы подпадают под условия лицензии СгеаНуе 
Соттоп$ Глсепзе, разрешающей ограниченное ис- 
пользование содержащихся в них таблиц стилей. Но 
поскольку уникальность работы в не меньшей степе- 
ни обусловлена графикой, то полное авторское право 
остается за дизайнером. Любому человеку, желающе- 
му включить элементы представленного дизайна в 
свои проекты, разрешено копировать и модифициро- 
вать (055$, но заимствовать, СТЕ, ]РС или РМС-файлы 
по отдельности или целиком можно только с явного 
согласия автора. 


Теоретически этого казалось достаточно, чтобы сохра- 
нить авторские права на оригинальную работу, не 
препятствуя использованию ее в качестве образца и 
заимствованию частей С$5-файлов. Тем самым лишь 
поощрялось стремление изучить новую технологию. 


ПРИМЕЧАНИЕ 


На (55-файлы распространяется лицензия «с упоминанием 
автора, для некоммерческого использования, с теми же ус- 
ловиями распространения своих работ». Подробнее о ее ус- 
ловиях можно прочитать на сайте Стеайуе Соттоп$ (ВЕЁр:// 
сгеаЧуесоттоп5.огд/Исепзез/Бу-пс-за/2.0). 


Чему мы научились 


Цель сайта — делиться знаниями, так что вроде бы 
описанные условия обеспечивали приемлемый ком- 
промисс. На практике все оказалось далеко не так 
идеально. 


Вскоре после запуска Хеп Саг4еп стали появляться 
первые подражания. Некоторые «тянули» дизайн це- 
ликом, включая всю графику. Это очевидное наруше- 
ниеавторских прав, поскольку все изображения защи- 
щены, 


Другие слегка модифицировали С55-файлы и графи- 
ку либо вставляли на свои сайты элементы дизайна 
так, что назвать это лишь повторным использовани- 
ем можно было с большой натяжкой. В некоторых 
случаях окончательный результат не вызывал слиш- 
ком тесных ассоциаций с Хеп Саг4еп. Но иногда он 
так походил на источник, что автор оригинала бывал 
недоволен. 


Что можно сэтим поделать? Как правило, бывает дос- 
таточно послать электронное письмо, чтобы уладить 
проблему, поскольку большинство людей все же ува- 
жают авторские права и пожелания человека, от кото- 
рого они черпают вдохновение. Но если нарушитель 
не желает идти навстречу, то принудить его нелегко. 
Если оригинальная графика не выставлена на сайте, 
то условия лицензии Сгеапуе Соглтпоп$ не позволяют 
привлечь к ответственности. Технически такое по- 
вторное использование допустимо, хотя многим ав- 
торам это не нравится. 


Нарушение авторских прав на произведения искусст- 
ва всегда было предметом споров. Насколько сильно 
надо изменить оригинал, чтобы результат можно было 
счесть новым произведением: Р азрешено ли взять за 
основу чужую защищенную авторским правом рабо- 
ту, если конечный результат будет полностью отли- 
чен от нее? На такие вопросы даже суды затрудняются 
дать определенный ответ. 


Для сайта еп Саг4еп идеальным является решение, 
позволяющее использовать таблицы стилей в качестве 
образца, но запрещающее полное или частичное копи- 
рование дизайна для коммерческих (или иных) целей 
без согласия автора. Грань здесь довольно тонкая: если 
лицензия излишне открыта, то авторы не захотят пред- 
ставлять свои работы; если чересчур закрыта, то цен- 
ность Иеп Сагаеп будет в значительной мере утрачена. 


Если не закрывать сайт, то никогда не будет гарантий 
от заимствования помимо желания автора. Есть ли- 
цензия или нет, но таково свойство любой опублико- 
ванной творческой работы: ее воруют. Это происхо- 
дит неизменно, загляните на сайт рае -5Кез.сот. 


Исходный текст 


Причем в Ме украсть проще благодаря возможнос- 
ти просмотра исходных текстов, имеющейся в любом 
браузере. Правда, и поймать вора проще - ведь есть 
протоколы обращений и поисковые машины, 


Во время работы над этой книгой проблема была еще 
далека от решения. Было сочтено разумным все же 
разрештить ограниченное использование С$$-файлов 
на условиях лицензии Стеапуе Соттоп$ с запретом 
применения в коммерческих целях, Такое решение не 
идеально, но работает в предположении, что у боль- 
шинства людей все же добрые намерения. 


В общем, мы поняли, что урод в семье обязательно най- 
дется, какой бы лицензией ни защищать свою работу, 
так что нужно лишь выбрать метод извещения добро- 
порядочных граждан о том, что им разрешено делать. 


Бери больше, кидай дальше! 


Многие посетители нашего сайта предлагали, как сде- 
лать его больше, лучше, по-другому, громче, с вита- 
мином С и так далее. Предложений хватало на любой 
вкус. Вот перечень некоторых идей. 


СМ$ 2еп багаеп 


Применить стили к одной странице - это хорошо, но 
как насчет целого сайта? Почему бы не распространить 
концепцию на разные страницы настоящего, обнов- 
ляемого сайта, сопровождаемого с помощью системы 
управления контентом (СМ$), чтобы полнее отразить 
реальные условия? 


Е-соттегсе 2еп багаеп 


Похожая идея — почему бы не сделать с помощью таб- 
лиц стилей электронный магазин с настоящей, посто- 
янно обновляемой витриной? Стилизовать можно 
было бы корзину, товары, продвигаемые позиции и 
так далее. 


Лауа$спрт 2еп багаеп 


Отделить структуру от представления — цель благо- 
родная, но почему бы не сделать еще один шаг и не 
ввести поведенческий уровень, отделенный от двух 
предыдущих: 

Великолепную иллюстрацию этой идеи предложил 
один из ее авторов Рарес Портан (Кагез Рокап) 
(мгуги.с552епоаг4еп.согл/)ауазсиру) (рис, 17), а обсужде- 
ние аргументов за и против можно найти на странице 
УГУ гле22оше.согл/агс1уе5/2004/05/ 04 ауазстру_Ь). 
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Рис, 17 + Вариант дизайна Геп багдеп со сценарием, 
реализующим плывущие облака 


ХМЕ/Х5ЕТ/К $5 /бог знает что еще 
еп багаеп 


Подставьте любой желаемый язык разметки и приме- 
ните к нему С$5-стили. Почему бы не продемонстри- 
ровать потенциал С5$5 в сочетании с другими языка- 
ми на базе ХМГ, а не только с ХНТМГ? 


И где это все? 


Без сомнения, все эти идеи завораживают, и реализация 
многих из них принесла бы несомненную пользу веб- 
сообществу. В большинстве случаев авторы предложе- 
ний получили положительные отклики и предложение 
разместить демонстрацию своих концепций вне сайта. 


У сайта Геп Саг4еп очень специфические цели, он не 
предназначен быть хранилищем всего для всех. Из- 
менение правил игры и предназначения сайта сейчас, 
когда накоплено уже столько материала, было бы не- 
справедливо по отношению к тем, кто прислал свои 
работы раньше. 


Но на базе предложенных идей можно организовать 
другие сайты. Если вы можете сделать лучше, присту- 
пайте. Один или два сайта даже были созданы, но долго 
не просуществовали. Есть разные мнения по поводу 
причин этого, мы поделимся своим, 


Во-первых, на сайт Йеп Саг4еп очень легко присылать 
работы. Необходимо лишь быть искусным дизайнером 
и знать правила написания С$$, но на создание своего 
варианта дизайна ненадо затрачивать несколько недель. 
Стилизовать целый сайт гораздо сложнее, особенно 
если контент постоянно изменяется. Если работа опла- 
чивается, то оправдать временные затраты можно, ина- 
че они становятся непреодолимым барьером. 


Во-вторых, главная цель Хеп Саг4еп была достигнута. 
Мы пытались с его помощью изменить отношение к 
дизайну на основе С55$, мы это сделали. И хотя стили 
применяются всего к одной странице, но обобщить 
идею на целый сайт в принципе несложно, 


Если кому-то абсолютно непонятно, как распростра- 
нить концепцию на несколько страниц, то существу- 
ет немало следующих стандартам сайтов, которые 
можно взять за образец. Многие корпоративные сай- 
ты перешли на дизайн на основе стандартов, напри- 
мер МЛтеа Ме\му$ (гиг лиге. сот), Е5РМ.сога, СБеуго!е{ 
(угигиг.спеуто]е{.сота), АОГ.сотп и другие. 


Таким образом, в самых разных отраслях имеется ин- 
терес к стандартам, а ценность последних реальные 
примеры доказывают даже убедительнее, чем чисто 
демонстрационный сайт типа Деп Саг4еп. 


Атлантида, с. 54 


В зеленых тонах, с. 72 


Подсолнух, с. 60 


Баллада, с. 78 


Весна, с. 66 


Ночная поездка, с. 84 


Дизайн 


Процесс веб-дизайна претерпевает драмати- 
ческие изменения, но его принципы остаются 
прежними. Думаете ли вы о выборе палитры, 
визуальном потоке, об эффектном использо- 
вании образов или управлении визуальной 
близостью страничных элементов — традици- 
онные ценности остаются в силе. 


Обсуждаемые в этой главе варианты дизай- 
на иллюстрируют эту точку зрения, отвечая 
одновременно на вопрос, всечаще встающий 
перед современными дизайнерами: как эф- 
фективно управлять технологическим про- 
цессом? Вне зависимости от того, что вы 
предпочитаете: работать в Адобе Рпо{о$Пор, 
готовить эскиз, создавать прототип с помо- 
щью С$$ или сразу приступать к кодирова- 
нию, вы обязательно найдете в этой главе 
новые для себя полезные приемы. 
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Дизайнер Кевин Дэвис (Кемп Вам 5) 


ммм. с$$тепдагдепт.сот/028 


Атлантида 


Минималистский дизайн, единство, символизм 


д ПЕНЫ Ш» чета В, ЗЕЕ Се < Ша ны 


Графический дизайн — это средство общения; талант- 
ливый дизайнер доносит до зрителя мысль, которую 
невозможно передать словами. Дизайн способен со- 
здать атмосферу и настроение, воззвать к чувствам и 
вызвать живой отклик у зрителя, 


Создавая «Атлантиду», Кевин Дэвис стремился с помо- 
щью таких элементов дизайна, как типография и гра- 
фи ка, проделать примерно то же, что делает дизайнер 
по интерьерам, подбирая сочетание столиков, стоек и 
красок для создания стильного кафе. Начав с выбора 
фотографий и цветовой палитры, Дэвис соединял раз- 
ные элементы, пока не добился желаемого результата. 
Затем он наложил графический материал на заранее 
продуманный макет страницы. 
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Рис. 1 + Примеры ранних минималистских макетов на основе С5$ 


Минимализм 

Первое, что бросается в глаза при взгляде на «Атлан- 
тиду», — это относительная простота. Исключение со- 
ставляет разве что детальный коллаж в заголовке. Ком- 
бинируя части фотографий с обманчиво простой 


версткой, Дэвис достиг редкого сочетания сложности 
и минимализма. 


Сам сайт С$$ Деп Сагаеп создавался в атмосфере, ког- 
да дизайн на основе С$5 пренебрежительно отверга- 
ли, считая его «прямоугольным» и «слишком про- 
стым» (рис. 1), Ничего плохого ни в том, ни в другом 
подходе нет, если только они применяются в подхо- 
дящем контексте. 


Презрительное отношение к этим «типичным» С55$- 
дизайнам проистекало из непонимания простого фак- 
та: авторы небыли графическими дизайнерами в при- 
вычном понимании этого слова, а вина возлагалась 
почему-то на технологию. Именно для исправления 
этой ситуации в первую очередь и задумывался сайт 
Гей Саг4еп. 


Но «Атлантида» дает убедительный аргумент в пользу 
того, что минималистский дизайн совсем не обязатель- 
но плох; ведь утомляют лишь бесчисленные повторе- 
ния одного и того же, Все-таки картофельное пюре, жа- 
реная картошка и картофель фри - для одного обеда 
чересчур. Немного пюре (или соевого творога тофу, на 
ваш вкус) в качестве гарнира к индейке — более подхо- 
дящее сочетание для простого, но вкусного обеда. 


В ситуации, когда ненужны сложные зрительные об- 
разы, облегченный минималистский дизайн — как раз 
то, что надо, В конце концов, дизайн диктуется со- 
держанием и, если содержанием визуально сложно 
для восприятия или требует повышенного внимания, 
то нет смысла перегружать его избыточным оформ- 
лением. 


С другой стороны, создать по-настоящему хороший 
минималистский дизайн... Даже профессионалам это 
удается с трудом. Когда элементы дизайна просты, они 
привлекают больше внимания зрителя, чем надо бы. 
Каждый элемент становится важен, поэтому именно 
внимательное отношение к деталям отличает выдаю- 
щуюся работу от посредственной. 


Изучая блестящий минималистский дизайн «Атлан- 
тиды», вы поймете, как следует сочетать разные эле- 
менты. Если удалить заголовок с картинкой, то макет 
станет более понятным (рис. 2). Главная информаци- 
онная область в середине соседствует с небольшим 
меню слева. 


Типография 


Размер шрифта основного текста в дизайне «Атлан- 
тида» чуть больше размера шрифта в меню. Дабы под- 
черкнуть, что текст слева не так важен, как текст спра- 
ва, Дэвис воспользовался типографскими свойствами 
(рис. 3). Кроме того, более крупный шрифт заголовка 
четко отделяет его от основного текста. Эти визуаль- 
ные различия сообщают дополнительную информа- 
цию о сравнительной важности каждого фрагмента 
текста. 

Вид шрифта — это способ передачи письменной речи, 
которой присущи определенная иерархия, построение 
и ритм. Акцентирование всего этого с помощью раз- 
мера шрифта, интервалов и цвета — действенный спо- 
соб сообщить читателю больше, чем написано. 


Иконография 


В расположенное слева меню Дэвис поместил неболь- 
шие иконки напротив названия каждого варианта ди- 
зайна. Поскольку они расположены рядом со ссылка- 
ми, то сливаются с текстом и выглядят как скромные 
маркеры, на которых глаз не задерживается. Эта мел- 
кая деталь визуально отделяет название варианта от 
находящегося ниже текста, В результате простое, в сущ- 
ности, меню выглядит более интересно. 


Иконки (или пиктограммы) — это упрощенные сим- 
волы, которыми можно представить как отдельный 
объект или идею, так и целую концепцию - путем 
замены длинного текстового описания визуальным 
образом. Визуально представить объект обычно 
просто, а вот визуализировать процессы или дей- 
ствия куда сложнее. Хорошая иконка не нуждается 
в пояснениях, но часто их приходится делать абст- 
рактными. Надо стараться, чтобы вид иконки как мож- 
но точнее выражал ее функцию, чтобы после много- 
кратного просмотра у зрителя возникала устойчивая 
связь между тем и другим. 
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Рис. 3 + Шрифт основного текста почти в два раза крупнее 
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Рис. 4 + Сплошные белые линии отделяют заголовки 
от основного текста 


ПРИМЕЧАНИЕ 


Многие дизайнеры не считают плохой выбор стандартной 
ширины полей проблемой, поскольку все равно переопреде- 
ляют ее, но для любителей правильные начальные значения 
важны. Никто не пострадает от того, что разработчики брау- 
зеров нормально «подготовят сцену», ведь, например, стан- 
дартный офисный принтер формирует достаточно широкие 
поля, чтобы не допустить перегрузки страницы текстом. 


к Е 


Линии 


Дэвис выбрал два стиля для линий, разделяющих раз- 
ные области. Пунктирной линией окружены верхние 
абзацы, накладывающиеся на картинку в заголовке, а 
сплошными белыми линиями отчеркнуты заголовки 
и хвостовики (рис. 4). Таким простым и ненавязчи- 
вым способом создается дополнительный визуальный 
контекст. 


За счет одного лишь использования линий можно 
определить различные области на странице, устано- 
вить границы, подчеркнуть порядок чтения материа- 
ла и ввести дополнительное измерение. Но опасайтесь 
переизбытка линий: незамкнутые прямоугольники и 
изобилие параллельных отрезков оставляют впечат- 
ление, будто имеется некая табличная структура, ко- 
торой на самом деле нет. Глаз пытается найти регу- 
лярность там, где ее, возможно, не существует, 
поэтому применяйте прямые линии только там, где 
эта имеет смысл. 


Поля 


Сосредоточив основное содержание страницы в цен- 
тральной колонке, Дэвис получил максимальную сво- 
боду в определении промежутков между элементами. 
За счет полей переменной ширины по обе стороны 
контент позиционируется в середине окна браузера. 
Иногда лучше выглядит дизайн, при котором запол- 
няется все окно, а иногда занятую текстом область 
предпочтительнее ограничить. 


Как бы то ни было, широкие поля слева и справа от ос- 
новных текстовых областей создают впечатление про- 
стора. По умолчанию большинство браузеров оставля- 
ют очень узкие поля вдоль внешней стороны страницы, 
поэтому текст простирается почти от края до края окна. 


Это тяжело для визуального восприятия. Отсутствие 
полей приводит к тому, что текст зрительно сливает- 
ся с тем, что находится за пределами окна браузера. 
Технологические умолчания в этом случае выбраны 
неудачно, исправить ситуацию должен дизайнер. 


В случае минималистского дизайна, когда поля явля- 
ются одним из немногих использованных визуальных 
средств, от их правильного задания зависит очень 
многое, Широкие поля фокусируют взгляд читателя 
на том, что отображается в окне браузера, 


ОЕ Дизайн 


Единство и символизм 


«Атлантида» - это прекрасный пример использова- 
ния элементов дизайна для создания настроения, 
что и входило в намерения Дэвиса. Согласно древ- 
негреческому философу Платону, Атлантида — это 
остров, погрузившийся в море много веков назад. 
Покрытая пятнами известкового налета спиральная 
раковина в сочетании с классическими статуями и 
колоннами в заголовке вызывает ощущение древ- 
ности, сопутствующей античной легенде, а темно- 
синий и черный цвет наводят на мысль о морских 
глубинах. Заранее выбрав графические образы и 
цвета, Дэвис позаботился о том, чтобы дизайн от- 
вечал его замыслу. 


Согласованность 


С помощью АдоБе РроюзВор цвета раковины были 
слегка изменены, а края немного сглажены, чтобы она 
сливалась с находящимся на заднем плане коллажем. 
Но Дэвис не стал смещать всю цветовую гамму рако- 
вину в сторону синих тонов, а для контраста оставил 
достаточно грязно-ржавого цвета (рис. 5). Примене- 
ние в дизайне одной лишь синей гаммы было бы, на- 
верное, насилием над зрителем (рис. 6). 


65$ #еп рагАей 


Те Коза 1ю Ей Мептиети 


Элементы дизайна могут варьироваться, но нужно 
стремиться сохранить единство цветового решения. 
Помимо излишне монотонной цветовой схемы, суще- 
ствуют и другие, более тонкие средства создать впе- 
чатление согласованности дизайна, например соответ- 
ствие между добавленными линиями и фотографией 
или пропорциональность при выборе размеров 
шрифта и окружающих текст линий. 


В заголовке «Атлантиды» мы видим сплошные бе- 
лые дуги, пересекающие раковину и коллаж. Вне 
контекста они не вызывают никакого отклика, Но ав: Сы | 

: Вей оная ные Пе Ков ло ЕоНиелитети Г 
на синем фоне форма и цвет дуг очень напоминают Р-Р НЕ = 
рябь на воде. Их форма и размер соответствуют ра- СОВЫ Е ик смощсвоный т 
ковине, так что между двумя элементами образует- ЗВ ип 
ся тесная связь. | НИ 


с55 деп рагаей 


Представление | 
Рис. 6 4- Заголовок в одних лишь синих тонах больше 
Выбранный метод представления — простые элемен- — СоОтветотвует теме, но ему недостает контрастности 
ты дизайна в сочетании со сложными образами и иде- 
ями — позволяют привнести в работу утонченность и 
глубину. Возможно, вы даже не замечали белых ли- 
ний, пока мы не указали на них, но теперь, когда их 


ПРИМЕЧАНИЕ 


Цветной вариант рис, 5 и б см. на вкладке. 


Прерогатива дизайна о. 


= 


вы а ор присутствие очевидно, трудно воспринимать их ина- 


че, как рябь на поверхности воды. 


Символизм «Атлантиды» не исчерпывается простыми 
линиями; следует еще обратить внимание на размеще- 
ние графики внутри заголовка. Атлантида минувшей 
мы лифт име эпохи -— могучая и богатая империя, символизируемая 
био | Помимо ро СВ м ан пу бы те со и обе, | каменными колоннами и богато украшенными статуя- 
м | ми, — изображена блеклыми тонами и помещена поза- 
Е ди контрастной прорисованной Атлантиды наших 
от ур бы слаба ма ое уу 4 ро дней: покрытой ржавчиной, древней и ушедшей в море. 
Пространственное расположение двух частей коллажа 
наводит на размышления о рухнувшей империи, дни 
славы которой давно миновали. Такое обманчиво про- 
стое решение стоит целого рассказа, зрителю есть над 
чем задуматься. 


Рис. 7 + Демонстрационная страница Сотр!ехзрига!, 

на которую намекает раковина в заголовке «Атлантиды» А для зрителя, разбирающегося в С55, изображение в 
заголовке именно спиральной раковины имеет и еще 
один смысл: Дэвистем самым отдал дань уважения клас- 
сической странице, демонстрирующей С5$, а именно 
работе Эрика Мейера (Епс Меуег) Согарехзриаа|, с кото- 
рой можно ознакомиться по адресу уу ллеуегуеЪ.согл/ 
ейс/с55/едре/согарехзриа/ ето. Вт (рис. 7). 


Прерогатива дизайна 


Дизайн — это мощное средство коммуникации; яс- 
ная и проводимая на всех страницах сайта мысль на- 
страивает посетителя на определенный лад. Далеко 
не для всех сайтов необходимо повышенное внима- 
ниек дизайну; если центральное место занимают со- 
держание и функциональность, то работа дизайне- 
ра должна оставаться незаметной и ограничиваться 
простой графикой и минималистской, но эффектив- 
ной версткой. 


В некоторых случаях дизайн должен содержать более 
явный посыл, зачастую даже не один. Не исключено, 
что при первом знакомстве некоторые тонкие задум- 
ки автора останутся непонятыми. Для интерпретации 
необходимы знания и опыт, поэтому, чтобы полнос- 
тью проникнуть в смысл такой работы, как «Атланти- 
да», необходимо попытаться встать на место дизайне- 
ра и понять его точку зрения. 


Задача дизайнера — донести свое послание до макси- 
мально широкой аудитории, не утеряв при этом его 
неповторимости и убедительности. Но есть много 
способов скрыть за основным сообщением дополни- 
тельную информацию, что и доказывает «Атлантида» 
Кевина Дэвиса. 
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` | ПОДСОЛНУХ 


Игра со светом и тенью, формой и пространством 


Однажды внимание Раду Дарваса привлекли 
подсолнухи, растущие на балконе. Он начал 
снимать их, и в результате родилась идея ди- 
зайна «Подсолнух». Обработка фотографий 
в АдоБе РАоюзНор помогла ему сформулиро- 
вать идею работы для сайта С5$ Деп Саг4еп. 


Прежде всего, он не хотел «прямоугольнос- 
ти». Но по мере продвижения увидел, что 
может управлять размещением колонок и 
создать у зрителя впечатление, будто они пе- 
рекрываются. Удачные сочетания света и 
тени, формы и пространства привели к по- 
явлению яркого и энергичного «Подсолнуха». 


Сохранение тени Ге 


В поисках света 


В то время как вы сидите и читаете эту книгу, рядом 
есть какой-то источник света. На секунду оторвитесь 
от чтения и поднимите глаза. Откуда исходит свет? 
Как он освещает близлежащие предметы: Куда па- 
дает тень? 


Художники используют свет и тень, чтобы сделать 
картину более реалистичной, создать настроение и 
Рис. 1 + Градиентная заливка прямоугольной области, усилить впечатление от своей работы за счет интерес- 
датируется примерно 1995 годом. Сглаживание и разбиение на ных эффектов, вынесенных на передний план. 


полосы при высоком коэффициенте сжатия выглядит очень 
непрофессионально 


Оглядываясь на прошедшее десятилетие, мы найдем 
много применений свету в веб-дизайне. Тут и гради- 
ентная графика (рис. 1), и рельефные кнопки (рис. 2), 
и падающие тени (рис. 3). 


К сожалению, веб-дизайнеры, не получившие надле- 
| жащего художественного образования, иногда пользу- 
Рис. 2 + Пример рельефного текста на рельефной кнопке. 7 Р 7 


тся светом н №. |: ГЬ 
Такие визуальные эффекты широко использовались в веб- бе ная ея Беды и ке 
страницах в середине 90-х годов ограничения «холста», с которым работаем. И не сто- 
ит жертвовать реалистичностью в угоду технике, при- 
меняя конфликтующие источники света (рис. 4). 


Сохранение тени 


Дизайн «Подсолнух» демонстрирует правильное при- 
менение источника света для создания тени, Хотя рез- 
кие переходы и неуместная рельефность в современ- 
ном веб-дизайне уже вышли из моды, но падающие 
тени остались, и тому есть несколько причин: 


+ тени делают страницу более привлекательной; 


+ тень создает иллюзию трехмерности объекта и всей 
Рис. 3 + Классический эффект падающей тени, страницы; 
примененный к фотографии 4+ тени легко создавать в графических редакторах. 


Во избежание неприятностей при использовании те- 
ней, например, из-за конфликтующих источников 
света, придерживайтесь следующих рекомендаций: 


+ обращайте внимание на то, насколько светлой или 
темной получается тень, следите, чтобы яркость 
тени логически соответствовала расстоянию. Если 
тень темная, то объект кажется расположенным 
ближе к заднему плану; чем тень светлее, тем даль- 

Рис. 4 + Неправильное использование источника света — ше объект зрительно отстоит от заднего плана и 

обратите внимание на различное направление теней ближе к зрителю; 
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+ ширина и высота тени также влияют на зритель- 
ное восприятие расстояния. Узкая тень приближа- 
ет объект к заднему плану, а широкая или высокая 
отдаляют его; 


4+ следите за тем, чтобы источник света был реалис- 
тичным. Если на странице есть два объекта, то тени 
от них должны падать в одну сторону. 


Например, в первых двух перекрывающихся прямоу- 
гольниках, составляющих среднюю колонку в «Под- 
солнухе», тень падает от источника света, расположен- 
ного слева (рис. 5). 


Ощущение света усиливается также за счет постепен- 
ного уменьшения яркости в заголовках правой колон- 
ки. Кажется, что свет угасает, и часть изображения 
пропадает из виду (рис. 6). 


О форме 


Форма, как и цвет, оказывает на нас психологическое 
влияние, Дизайнер может задействовать определенные 
качества формы, чтобы вызвать у посетителей соот- 
ветствующие эмоции эмоции. 


Воздействие формы не ограничивается компьютер- 
ным или печатным дизайном. Люди пользуются фор- 
мой еще с тех пор, как научились рисовать символы 
на песке или рассказывать истории с помощью рисун- 
ков на стенах пещер. Формы присутствуют повсемест- 
но, они неотъемлемы от нашего мира да, кстати, и от 
всего, что делает человек. И при написании сложного 
математического уравнения, и для добавления архи- 
тектурных изысков к зданию и даже в религиозной и 
языческой символике (Святой крест, Звезда Давида, 
татуировки) — всюду формы являются частью нашей 
жизни и служат самовыражению, 


В «Подсолнухе» самым ярким образом является цве- 
ток. Он притягивает взгляд не только своим цветом, 
нои формой. 


Первичные формы 


Окружности чаще всего ассоциируются с женским на- 
чалом: теплота, уют, чувственность, любовь и другие 
понятия из того же ряда, Кроме того, окружности (или 
дуги) часто применяются для выражения идеи общ- 
ности, целостности, стойкости, движения и безопас- 
ности. На многих сайтах, имеющих отношение к жен- 
щинам, общинам, соборной жизни и романтическим 
историям, встречаются окружности, которые усили- 
вают эмоциональное восприятие, 


СОВЕТ 


Если вы пользуетесь слоями в РНофо$Пор, отметьте флажок | 
Ш5е СЦоБа| Апд{е (Установить глобальный угол). Тогда угол, 


под которым падает свет, будет одинаков для всех изобра- 
жений, с которыми вы работаете. 


ВепеГи 


| Му растра? Рог гесодпщол, периабол, за а 
 гезоцса ие сап эй гагат Ю ме плаюо бе сазе 
|2 С93-Базе4 дезюл, ТНЕ 15 обтем№ пее420, омеп 
‚ зову. Моге апд глоге гпаюг 5$ аге (эмо е. 
1езр, ША по апоцой пауе. Опе ау И озЧегу мии 
| Бва Мотса! сопозну па дау 15 поносау 


Рис. 5 + Правильное использование источника света для 
создания согласованных теней 
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Рис. 6 + Уменьшение освещенности по мере удаления от 
источника света добавляет реалистичности 


Рис. 7 + При внимательном рассмотрении подсолнуха 
видны треугольные и круглые формы 


Уаз из Дрош" 


Тиеге | Соапу о по20 9 СБ 10 Беакей 
зоноч№ Ву огарле ая. Те дей багдал анте 
10 мхсНа, морга, ап апеситяое рае рабо, То 


Без“, ме зогие ог акб Че огиь у Ве =, 


СПЕК оиатии отее мА И Поз неее рен и 


й Ма уегу раде. Те со гагат Иа вагтие, Ви 
| опру ЗАНАК) В ВЫ Сай 1 ле оч аела 655 Ме 


Рис. 8 + Прямоугольники помогают уравновесить дизайн 


Пространства мне! 


Треугольники считаются выражением мужского на- 
чала; силы, агрессии и динамики. У направления тре- 
угольника тоже есть свой смысл. Глаз неосознанно 
следует в направлении доминирующего угла. Если 
треугольник повернут вверх, он выражает движение 
и агрессию. Треугольник же, повернутый вниз, ассо- 
циируется с пассивностью и бессилием. 


Разумеется, с прямоугольниками (в том числе квадра- 
тами) тоже ассоциируются определенные представле- 
ния: мощь и основательность (вероятно, из-за жесткос- 
ти и предполагаемой массивности). Прямоугольные 
формы могут вызывать у зрителя ощущение упо- 
рядоченности, логичности, иерархичности и безо- 
пасности, 


Комбинирование форм для 
достижения максимального 
воздействия 


Внимательно приглядевшись к самому подсолнуху, 
МЫ обнаружим сочетание треугольников И окружно- 
стей. Конечно, они естественного происхождения, но 
Дарвас обработал изображение в РВою5Вор, подчерк- 
нув цвет и форму цветка. В результате получилось 
очень чувственное изображение, сочетающее мужское 
и женское начала, и впечатление от него надолго за- 
поминается (рис. 7). 


В «Подсолнухе» строгие прямоугольники уравнове- 
шивают более чувственную природу цветка, что и 
формирует основу дизайна (рис. 8). 


Различные формы можно комбинировать для оказа- 
ния наибольшего воздействия на зрителя. Добавьте 
цвет и свет, и картина станет интереснее. А если еще 
правильно распорядиться пространством, то впечат- 
ление может быть очень ярким. 


Пространства мне! 


Наравне со светом, тенью и формой пространство 
также обладает интересными психологическими ас- 
пектами, которыми художники с давних времен 
пользовались для эмоционального воздействия на 
аудиторию. 


Правильное использование пространства в визуаль- 
ном дизайне позволяет достичь сразу нескольких це- 
лей: привлечь внимание к нужному месту страницы, 
удачно разместить текст и изображения, дать глазу на 
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чем-то отдохнуть. Это облегчает восприятие текста и 
оставляет место для обработки представленной ин- 
формации. 


Психологические и 
социальные аспекты 


У пространства есть психологические и социальные 
аспекты; 


+ пространство и экономика взаимосвязаны. Конеч- 
но, вы слышали шутку о том, что женские юбки 
становятся короче, когда в экономике начинается 
спад. Имеющееся пространство и способ его ис- 
пользования значат очень много. Дизайн, загро- 
можденный деталями, выглядит недостаточно 
стильно, тогда как хорошо сбалансированное раз- 
мещение объектов в открытом пространстве несет 
более утонченный посыл; 


+ свободное пространство — это не просто отсутствие 
материальных предметов (на самом деле, оно уси- 
ливает впечатление от объектов). Обилие объектов 
вызывает чувство незащищенности и напряженно- 
сти, тогда как наличие свободного места оставляет 
впечатление изысканности и легкости; 


+ упространства есть культурные ассоциации. В раз- 
ных культурах восприятие цвета и формы разнят- 
ся; также отличается и реакция на пространство. 
В некоторых обществах тесный физический контакт 
является предпочтительным способом общения, 
в других - к примеру, в Соединенных Штатах - 
комфортным считается обтщение на расстоянии. 


Если применить все вышесказанное к дизайну, то ста- 
нет ясно, что свободное пространство — это не просто 
то, что осталось на странице после размещения всех 
элементов, а неотъемлемая характеристика дизайна. 


Позитивное и негативное 
пространство 


Насколько важной составной частью дизайна являет- 
ся пространство, станет более понятно, если мы рас- 
смотрим разницу между позитивным и негативным 
пространством. 


| | Завершающие штрихи 


Позитивным называется пространство, занятое объек- 
тами, составляющими элементы дизайна. Негативное 
пространство — это то, что свободно от объектов (фон). 
Однако полностью отделить позитивное пространство 
от негативного невозможно, они взаимозависимы и 
всегда присутствуют одновременно. 


Негативное пространство помогает определить границы 
позитивного, а границы объектов, в свою очередь, опре- 
деляют, где начинается негативное пространство, кото- 
рое само по себе является некоторой формой (рис. 9). 


Рис. 9 + Если зачернить свободное пространство, 
то станет видно, что оно определяет края объектов 


и само состоит из комбинации различных форм Завершающие штрихи 


Если вы понимаете принципы работы с источниками 
света, то сможете правильно нарисовать тени и при- 
менить некоторые другие приемы. Роль формы в ди- 
зайне заслуживает более детального исследования как 
сточки зрения общего зрительного восприятия, так и 
для более узких целей: создания логотипов и иконок. 
Наконец, ощущение пространства, умение манипули- 
ровать им, понимание, для чего оно нужно, поможет 
полнее донести свою мысль до зрителей. 


Вконечном итоге контроль над светом, пространством 
и формой позволит вам создать такой же высокопро- 
фессиональный дизайн, как в «Подсолнухе». 
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Дизайнер Боэр Аттила (Воег АЦЦа) 
ммм. с52епдаг4еп.сот/083 


Весна 


Использование цвета для пробуждения чувств 


Как-то после холодной, скучной зимы Боэр 
Аттила проснулся и увидел за окном первый 
ясный, солнечный, весенний день, наполнен- 
ный бодрящими, энергичными и радостны- 
ми цветами. Этот переход от зимы к весне и 
вдохновил его на создание описываемого 
ниже дизайна, в особенности в плане выбора 
цветовой гаммы. 


Давно известно, что цвет пробуждает в лю- 
дях различные эмоции. Именно поэтому мы, 
например, называем красный цвет горячим. 
Красный ассоциируется с пламенем, со жгу- 
чим перцем. Эти идеи находят применение и 
в дизайне; скажем, цвета земли — коричневый 
и желтоватый — используются в упаковке для 
натуральных продуктов. 


В «Весне» однотонные цвета зимы сталкива- 
ются с цветами пробуждающейся весны. По- 
лучившуюся палитру не назовешь ни холод- 
ной, ни горячей, скорее она выражает теплоту 
и гармонию и создает у зрителя ощущение 
умиротворенности и уверенности. 


| | Влияние цвета бу 


Влияние цвета 


Дизайнер, желающий донести свою мысль до аудито- 
рии, должен понимать, что восприятие цвета с уче- 
том психологии, культурных особенностей и пола не 
менее важно, чем технические аспекты. 


Ясный посыл 
‚ ПРИМЕЧАНИЕ 


Иногда использование цветов, противоположных ожидаемым, 
может создать конфликт, и это тоже интересный подход к ди- 
зайну, приносящий подчас отличные результаты. Но чтобы от- 
важиться на такое, нужно еще тщательнее планировать и тес- 
тировать сайт, чтобы выбранные цвета действительно достигли 
поставленной цели. Необходимо убедиться в наличии есте- 
ственной корреляции между цветом и реакцией зрителя. 


Конечно, контент и подбор графики ясно выражают 
смысл и назначение сайта. Но не менее важным сред- 
ством передачи зрительной информации является 
цвет. Опытный дизайнер знает, какие цветы наилуч- 
шим образом подходят для передачи его идеи и соот- 
ветствуют целевой аудитории. Цвет может быть так 
же — а иногда даже более — убедителен для человечес- 
кого глаза, как графические образы и текст. 


Если вата задача — создать сайт для группы, играю- 
щей металлический рок, то яркие цвета, например 
желтый и розовый на белом фоне, не смогут адекват- 
но выразить идею. Металлисты ассоциируются с 
тьмой и, хотя яркие цвета, конечно, могут использо- 
ваться в дизайне, но лучше всего особенности этого 
музыкального жанра передаются темной, тяжелой 
цветовой гаммой, 


Наоборот, если вы делаете сайт классического кварте- 
та, то очень Темные цвета не смогут донести утончен- 
ность и легкость музыки. Выбор цветов, соответству- 
ющих теме и идее сайта, чрезвычайно важен, если вы 
хотите, чтобы дизайн рентил поставленную задачу. 


Цвет и человеческая психика 


Воздействие цвета на человеческие эмоции - очень 
интересная тема, Между ними имеются сложные вВЗа- 
имосвязи, обусловленные многими факторами. 


Люди снарушенным цветовым восприятием, очевид- 
но, испытывают несколько иные эмоции, чем люди с 
полноценным зрением. Примерно каждый двенадца- 
тый американец страдает птироко распространенной 
формой цветовой слепоты (неспособны отличить 
один цвет от другого, чатце всего зеленый от красно- 
го). Поэтому при выборе цветов следует иметь в виду 
демографический состав аудитории. 


Оттенки цвета тоже играют роль. Эмоции, вызывае- 
мые ярко-зеленым и грязно-зеленым цветом, совер- 
шенно различны, Изменяет восприятие и добавление 
к цвету текстуры. В табл, 1 перечислены наиболее рас- 
пространенные цвета и те понятия, с которыми они 
ассоциируются. 


Таблица 1 + Психологическое восприятие основных цветов 
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Как видите, некоторые цвета воспринимаются не- 
однозначно, а иногда разные цвета вызывают оди- 
наковые ассоциации, например черный и белый. Так, 
красный возбуждает страсть и одновременно являет- 
ся признаком опасности (а может быть, между этими 
эмоциями не так уж много различий:). Эти кажущие- 
ся противоречия обусловлены множеством факторов, 
в том числе культурными и половыми различиями. 


Для дизайна «Весна» выбраны нежные и приятные от- 
тенки зеленого цвета, вызывающие воспоминание о 
траве и листьях. Легкий налет голубого, встречающий- 
ся в дизайне, тоже ассоциируется с природой (рис. 1). 


Цвет, культура и пол 


Аттила по национальности венгр. Влияет ли культур- 
ная среда, в которой родился и живет художник, на 
выбор дизайна и восприятие цвета? Эксперты согла- 
сятся, что да, влияет. И точно так же впечатление, скла- 
дывающееся у зрителя от созерцания «Весны», может 
зависеть от культуры и пола. 


Особенности различных культур и пол обуславливают 
базовые ассоциации, обсуждавшиеся в предыдущем 
разделе. В табл. 2 приведена некоторая информация по 
этому поводу. Нетрудно предположить, что подходить 
к выбору цветовой гаммы нужно очень осторожно, 
особенно в такой глобальной среде, какой является 
Всемирная паутина. 
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Рис. 1 + Палитра цветов дизайна «Весна» 
включает оттенки зеленого, намек на голубой и белый цвет 


ПРИМЕЧАНИЕ | 
Дополнительную информацию о цвете, а также ссылки на 
многочисленные статьи, книги и другие ресурсы по этой теме 
вы можете найти на сайте Со\отсот профессора Дж. Л. Мор- 
тона (3. |. Момоп) (ммм. со(огсот.сот). Еще один ценный 
источник информации о цвете -— это сайт Саизез оЁ Сост | 
(ВЕЕр://меБех ТЬ\$.огд/саизезо?со[ог). 


ПРИМЕЧАНИЕ 


| Цветной вариант рис. 1 см. на вкладке. 


ое Цветовые палитры веб-сайтов В-” 


Таблица 2 + Влияние пола и культурной среды на восприятие цветов У 


пущи 


ве азиатсь лытуо. Олин 
| атс у | 
стве азиатских культур 


ПРИМЕЧАНИЕ 
Прежде чем окончательно определяться с дизайном, непло- 
хо бы попробовать несколько палитр, В АдоБе РНофо$Пор сде- 
лать это легко (рис. 2). Создайте пустой документ и с помо- 
щью инструмента Со{ог РусКег поместите выбранные цвета на 
полоску, чтобы понять, как они будут выглядеть в сочетании. 
Затем можете подготовить тестовый документ и применить к 
нему эти цвета с помощью (5$. 


Рис. 2 + Создание цветовой палитры в РАоо$Пор 


ПРИМЕЧАНИЕ 


Цветной вариант рис. 2 см. на вкладке. 


‚ виды цве 


а о наи 


АРТ ХЗ. ‘=ьь р ав ДН ных обще 
у ПР. Е оыщЕ 


Цветовые палитры. 
веб-сайтов ‘ 


Выбирая цветовую палитру для своего проекта, не за- 
бывайте обо всем сказанном: выше; Чтобы донести 
свою мысль до аудитории, надо понимать, как она от- 
реагирует на те или иные цвета. 


Ё ЕМУ 


С5$ может помочь на этапехсоздания прототипа сай- 
та. Сделайте несколько таблиц стилей, по одной для 
каждой опробуемой палитры, и примените их к тес- 
товому документу. Можно даже включить такую про- 
цедуру, как часть проверки пригодности сайта. В этом 
случаевы предъявляете фокус-группе различные цве- 
товые схемы и реле за пашни = 


Изучение аудитории 


Золотое правило общения — узнайте свою аудиторию. 
Поскольку человеческая психология, культурные вли- 
яния и пол накладывают отпечаток на восприятие 
цвета, необходимо ясно представлять, на кого будет 
рассчитан дизайн. Иногда ассоциации настолько уни- 
версальны, что применимы для любой группы. Сюда 
можно включить дизайн с обилием синего, коричне- 
вого и — как в случае «Весны» — зеленого цветов. 


Вмвайн 


Эксперт по цвету Дж. Л. Мортон, чей сайт мы уже упо- 
минали в этой главе, предлагает дизайнерам макси- 
мально придерживаться ассоциативныз связей. Если 
сайт рассчитан на детей, то выбирайте цвета, выража- 
ющие радость. Если вы хотите оформить сайт подчер- 
кнуто элегантно, то в США прекрасно подойдут чер- 
ный и серебристый цвета. Если вы обращаетесь к 
мужчинам, то, вообще говоря, изобилие синего не 
повредит. Если же сайт ориентирован на женщин, то 
красные и розовые тона предпочтительнее синих. Если 
сайт посвящен природе, то разумно брать зеленый, 
синий и коричневый цвета. 


Цвета в С5$ 


К счастью, в С$$ для работы с цветами есть много 
средств. К. вапгим услугам: 


+ имена цветов. В С55 определено 17 поименован- 
ных значений: ЫасКк (черный), зПуег (серебристый), 
огау (серый), мНие (белый), ригре (пурпурный), 
Расбяа (фуксия), ртееп (зеленый), ште (лайм), ойуе 
(оливковый), уеПо\м/ (желтый), пауу (темно-синий), 
Ыше (синий), {еа| (бирюзовый), адиа (аквамарин) и 
огапре (оранжевый). Пример: 


со1ог: огапде; 


+ КСВ-значения (числовые). Можно использовать 
числовые значения для красной, зеленой и синей 
составляющих цвета, как в примере ниже- для свет- 
ло-голубого. Узнать их можно в РВоозВор (рис. 3) 
или любом другом графическом редакторе: 
со1ог: т9Ь(51,153,204); 


+ КВОВ-значения (процентные). Можно задать про- 
центные доли красного, зеленого и синего, В при- 
мере ниже получится фиолетовый цвет: 


со10о:: х96(93%, 51%, 93%); 


+ шестнадцатеричные значения. Это шестизначное 
число в шестнадцатеричной системе счисления, кото- 
рое можно получить с помощью РВо‘озвор (рис. 4) 
или одной из множества других программ. Каждая 
пара символов в нем соответствует одной компонен- 
те КОВ. Такая запись применяется в \М/еБ уже очень 
давно, так что многие читатели с ней знакомы: 


со1ог: #0000ЕЕ; 


беес{ а Оез'дп 


Рис. 3 + Нахождение значений ВОВ в РАо{о$Пор 


Рис. 4 + Использование инструмента Со1ог РЕсКег в РАою5Пор 
для показа шестнадцатеричных значений цветов 


ПРИМЕЧАНИЕ 


‚ Подробнее о системных цветах см, документ ммм .\/З.ота/ТК/ 
(5$21/м. пт у$ет-со[ог5; Обращаем ваше внимание нато, 
что эти цвета не войдут в цветовой модуль, определенный в 
спецификации 05$ 3.0. 


ПРИМЕЧАНИЕ 
Многие до сих продолжают пользоваться «безопасными» 
| цветами. Но поскольку абсолютное большинство работаю- 
‚ щих сегодня компьютеров поддерживают миллионы цветов, 
то следовать этому соглашению уже необязательно, если толь- 
ко вы не рассчитываете на специфическую группу посетите- 
лей, Читатели, которые знают, какие 256 Цветов считаются 
безопасными в Ме, наверное, заметили, что цвета, исполь- 
зованные в дизайне «Весна», не входят в их число, 


+ сокращенные шестнадцатеричные значения. Та- 
кую нотацию можно применять лишь тогда, когда 
каждая пара состоит из двух одинаковых символов. 
Например, #ЕР6699 можно сократить, а #808080 -— 
нельзя. Синий цвет из примера выше удовлетво- 
ряет указанному требованию, так что его шестнад- 
цатеричное значение можно сокращенно записать 
в виде: 


соТог: #00Е: 


+ системные цвета. Это набор ключевых слов, опре- 
деленных в С5$ 2.1, которые позволяют пользовать- 
ся системными цветами, установленными на ком- 
пьютере посетителя. Например: 


со1ог: ИтпаочТехе; 


Красочные выводы 


Занимаетесь ли вы дизайном профессионально или 
для себя, начинать следует с ясного осознания того, 
что вы хотите сказать зрителю, и определения целе- 
вой аудитории. Зная это, вы скорее подберете цвета, 
усиливающие выразительность вашего послания, 


«Весна» —это прекрасный пример цветового решения, 
точно соответствующего поставленным целям: выра- 
зить идею перехода от зимы к весне, вселить в зрите- 
ля чувство спокойного оптимизма и донести эти эмо- 
ции до глобальной аудитории, которая у сайта С$5$ еп 
Саг4еп, безусловно, имеется, 


ава 2000 


Дизайнер Лаура Макартур (1аига МасАКиг) 
млм. с5$7епдагдеп.сот/022 


В зеленых тонах 


Сочетание орнамента, текстуры и контраста 


Однотонная зеленая гамма дизайна «В зеле- 
ных тонах» в сочетании с пышной текстурой 
наводит на мысль о митистой лесной подстил- 
ке и богатой бархатистой ткани. Лаура Ма- 
картур попыталась передать в этом дизайне 
чувство душевного равновесия и покоя. 


Использованием повторяющегося узора и 
моделированием текстуры Макартур попы- 
талась сбалансировать богатую деталировку 
с простотой остальных решений. Приглу- 
шенная однотонная цветовая гамма не загро- 
мождает дизайн, а плоские зеленые области 
оставляют место, на котором глаз может от- 
дохнуть от узоров. 


Орнамент 173. 


Орнамент 


Графика дизайна «В зеленых тонах» состоит в основ- 
ном из повторяющихся орнаментов, которые исполь- 
зуются повсюду. Есть два основных вида: один состо- 
ит из полутоновых точек, в другом прослеживаются 
цветочные мотивы (рис. 1 и 2). Орнаменты созданы 
путем сочетания элементов ‘из галереи с фильтрами, 
имеющимися в АдоБе РВоюзВор. Для большей зре- 
лищности были разработаны некоторые дополнитель- 
ные вариации, и то, что получилось, не выглядит скуч- 
ным и повторяющимся. 


Рис. 1 + Полутоновый орнамент крупным планом Вообще говоря, орнамент — это повторяющийся визу- 
альный элемент (или несколько элементов), заполняю- 
щий данную область. Орнаменты встречаются в самых 
разных видах графического дизайна, например одеж- 
ды и интерьеров, а равно в природе: поры апельсино- 
вой корки или повторяющиеся прожилки на листе. 


Хороший орнамент — лучитий друг веб-дизайнера. Об- 
ширные области, в которых нет или почти нет контен- 
та, нужно чем-то заполнить. В одних случаях для этого 
достаточно сплошной заливки цветом, в других име- 
ет смысл оставить пустое белое место, а иногда нужна 
какая-то визуальная деталь сверх одного лишь цвета. 


Ограничения, свойственные современному веб-дизайну, 
мы подталкивают к использованию орнаментов. Путем по- 
Рис. 2 + Элемент цветочного орнамента крупным планом вторения простой небольшой картинки можно заполнить 
всю страницу, и в силу малого размера файла это обхо- 
дится недорого в смысле затрат на передачу данных; по- 
вторяющимся изображением размером 500 байт можно, 
к примеру, замостить область шириной 900 пикселей. 


Управлять повторением позволяет определенное в (55 
свойство БасКргоци4-со]ог. Оно может принимать зна- 
чения гереаь по-гереаф, гереа{-х и гереа{-у, то есть по- 
вторять картинку, нарисовать только один раз или 
повторять в каком-то одном направлении. 


3 { 
БаскагоипЯ-гереас: по-гереаЕ; 
} 
Боау ( 5. 
|’ > раскагозла: 46699991 (аабати 


ааратиа. ЗЗЕ)Икерват =х 
в 0рх КЫрх ле РВ ОНА 
} 


И 


Из этого примера видно, что свойство Баскетомп9- 
гереа{ можно задавать отдельно, независимо от дру- 
гих свойств фона, или вместес другими значениями в 
составе стенографического свойства Баскргоипа. 


Г Дизайн 
Текстура 


В МеБ не уделяется большого внимания тактильным 
ощущениям, впрочем, это характерно и для компью- 
терной индустрии в целом. Обратная осязательная 
связь часто встраивается в контроллеры игровых при- 
ставок, но помимо них почти не применяется в про- 
дукции, рассчитанной на массового потребителя. 


В начале этого десятилетия компания ГорЦесв экспе- 
риментировала с мышками под общим названием 
\Еее], которые позволяли чувствовать «текстуру» не- 
которых графических элементов операционной сис- 
темы и веб-страниц. Например, когда курсор мыши 
проходил над гиперссылкой, ощущался слабый тол- 
чок. В последнее время нам не доводилось слышать 
об этой технологии, а ГорЦесЬ таких мышек больше 
не выпускает. Хотя идея была интересной, никто так 
и не придумал, как ее применить, и дело заглохло. 


Таким образом, текстуры в обычном понимании этого 
слова в \У!еЬ отсутствуют; щелчок мышью - это, пожа- 
луй, единственное тактильное ощущение. Но текстуру 
необязательно осязать, возможно и визуальное ее пред- 
ставление. 


Скульптура может быть облачена в ниспадающие 
одежды, высеченные из камня. Мы знаем, что, коснув- 
шись платья, ощутим лишь гладкость и твердость кам- 
ня (рис. 3). Но в то же время каменное одеяние вос- 
принимается как настоящая одежда, поскольку 
обладает теми же визуальными характеристиками. 


Орнамент и текстура взаимосвязаны. Часто с помо- 
щью орнамента осознанно или неосознанно создает- 
ся имитация текстуры. А многие текстурные элемен- 
ты естественным образом формируют орнаменты за 
счет повторения схожих фрагментов. 


Возможно, в основе орнаментов дизайна «В зеленых 
тонах» и не лежит фотография, но они безусловно 
напоминают реальные текстуры. Орнамент, состав- 
ленный из точек, наводит на мысль о пупырчатой по- 
верхности, а нечеткие квадратики походят на клетча- 
тую ткань. Орнаменты с цветочными мотивами как 
будто сведены со старомодной подушки или богато 
украшенной драпировки. В целом при виде применен- 
ной структуры возникает образ удобного шезлонга, в 
который так и хочется опуститься. 


Контрастность 


Однотонная цветовая гамма в неумелых руках может 
оказаться опасной. Изобилие цвета и деталей приво- 
дит к проблемам с контрастностью, о которых забы- 
вать не следует. Рис. 3 + На этих скульптурах из камня высечена текстура одежды 


| Контрастность Бе 


Контрастность позволяет разграничить различные 
элементы, Если контрастность мала, то элементы зри- 
тельно смешиваются и текст становится нечитаемым. 
Если она слишком велика, то у зрителя возникает 
ощущение дискомфорта. 


Высокая контрастность 


Слишком высокая контрастность загромождает ди- 
зайн и ведет к «какофоний» утрированных визуаль- 
ных образов. Узкий диапазон цветов в дизайне «В зе- 
леных тонах» приемлем, потому что контрастность 
достигается за счет текстуры и типографских свойств 
текста. Вариант с более широкой цветовой гаммой был 
бы слишком кричащим (рис. 4). 


Рис. 4 + Увеличение контрастности приводит к конфликту На протяжении многих веков печатное слово наноси- 
С'АРУТИМИ ДОТаЛЯМИ лось черной краской на белую бумагу. Хотя цветные 
типографские краски изобретены уже давно, но чер- 
ное на белом -— это лучший из всех возможных кон- 
трастов, создающий наиболее комфортные условия 
для чтения. Вообще говоря, то же верно и для чтения 
сэкрана: максимальная контрастность достигается при 
рисовании черного текста на белом фоне. 


Впрочем, бывают и исключения. Поскольку компью- 
терный монитор в отличие от печатной страницы из- 
лучает свет, ему присущи специфические ограниче- 
ния, Яркий ЖК-монитор в темной комнате может 
оказаться слишком ярким для комфортного чтения. 
Попытка прочитать с него что-нибудь в таких усло- 
виях может стать сущим мучением для глаз. 


Рис. 5 4 Одновременный контраст приводит к иллюзии 
мерцания на границах основных цветов С точки зрения контрастности цвет представляет до- 
полнительные проблемы. При некоторых сочетани- 

о в у ях близко расположенных цветов возникает опти- 

| ти ческая иллюзия мерцания, Это так называемый 


7 ео АЕ ЕАН эффект одновременного контраста. Когда два до- 
| Со ИТ асе | полнительных цвета, например оранжевый и синий 
или зеленый и красный, находятся рядом, контраст 
получается особенно сильным и границы чрезмер- 
но резки (рис. 5). Если такие дополнительные цве- 
ты перемежаются, то возникает неприятное для глаз 


напряжение. 


Но в более тонких формах одновременный контраст 
может стать ценным инструментом для создания 
изысканных эффектов. Оранжево-желтый цвет мо- 
Рис. 6 + Один и тот же цвет кажется более оранжевым жет казаться более оранжевым на желтом фоне, но бо- 
на желтом фоне и более желтым на красном лее желтым на оранжевом или красном фоне (рис. 6). 
Тусклые цвета на еще более тусклом фоне могут 
казаться более яркими: например, бледно-красный 
может приобрести насыщенность, будучи нанесен 
на серый фон. 


ПРИМЕЧАНИЕ 


Цветной вариант рис. 4-6 см. на вкладке. 


Низкая контрастность 


Слишком низкая контрастность создает общее впечат- 
ление тусклости дизайна. Контрастность необходима 
для того, чтобы отдельные элементы были различимы, 
В случае дизайна «В зеленых тонах» используются раз- 
ные оттенки зеленого цвета - от светлых до темных; 
при меньшем разбросе цветов разрушилось бы впечат- 
лениеот взаимодействия визуальных элементов, исчеЗз- 
ло бы выделение и глазу было бы не на чем отдохнуть. 
В итоге визуальный баланс был бы нарушен (рис. 7). 


Низкая контрастность часто применяется для созда- 
ния эффектаутонченности. Пиксели-это относитель- 
но большие и тяжеловесные единицы для целей ди- 
зайна; невозможно провести линию тоньше одного 
пикселя, так как пиксель неделим. Но, уменьшив ин- 
тенсивность отбрасываемой линией тени, можно со- 
здать иллюзию, будто линия стала тоньше (рис. 8). 


Аналогично: путем уменьшения контраста между раз- 
личными элементами дизайна можно добиться эффек- 
та смягчения и уменьшения значимости. Например, ме- 
нее важный текст можно было бы выводить более 
светлым цветом. А если нарисовать неактивную иконку 
или ссылку неконтрастными цветами, то пользователь 
получит визуальное указание на то, что она недоступна. 


Возможности, которые предоставляет дизайнеру при- 
менение низкой контрастности, надо использовать 
правильно и с умом. Человек со стопроцентным зре- 
нием сможет безтруда прочесть темно-серый текст на 
светло-сером фоне, но близорукому придется щурить- 
ся или увеличивать размер шрифта, текст черного 
цвета легче различим. 


На разборчивость текста влияет и контрастность цве- 
тов. У разных цветов разные характеристики. Напри- 
мер, чистый желтый по природе своей светлее синего, 
поэтому желтый текст на белом фоне будет нелегко 
разобрать даже людям со стопроцентным зрением. 


Цветовая слепота 


Еще одним заслуживающим внимания аспектом кон- 
трастности является восприятие плохо сочетаемых 
цветов людьми, страдающими цветовой слепотой 
(рис. 9). Существуют две основных формы этой 6бо0- 
лезни и много разновидностей, Наиболее часто встре- 
чаются такие общие формы: 


4+ протаномалия/дейтераномалия. При этом менее 
серьезном заболевании человек может видеть боль- 
шинство‘ цветов, но‘способность различать их по- 
нижена, Оно известно также под названием «ано- 
мальная трихромазия»; 
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Рис. 7 4 «В зеленых тонах» при недостаточной контрастности 


Рис. 8 + Осветление внешних контуров кнопок заставляет их 
казаться тоньше 


ПРИМЕЧАНИЕ 


Цветной вариант рис. 7 см. на вкладке, 


= | | Единство стиля 


Та Бали А мона 


2% "Те КоаЧ то Бон еттети 
ПОретааи а фыб вный тете гов т’ Вы раде геле гй? оррлчеынт 
Со ое щи, Пееситураь ие ПОЗА, ый офея 23457 пару. 


а о Е 
обеим Ба Бечая веба ан в а и аль 
ВД. КБ Чье ПИ, Па к Кн даа Пета реале, 


бо о р а 
№ вы а (ро) ме БбНАрысе |9 гыгы вой 
; еее тер ыббси, Баеааеный пжзый зб Три яч 
Фен Иенаы сн Иа 
Бо ИЛ ТЕ АБО 
"Артек [а сбоев а ей бриг ЗУ а Ре Баре вегЧений БдсирАа а 
Бераа. "Тук т Коба отец: Ве вльй а, [еоуеии. тый сыр ре рабо, "Га Беер, фене вилы 
И 
па ен БЛые етре, «Д а ЫР ий еФьиаариый а Не еаветтый свв И. Уры. неаД 


СОЯ аЙлньль бое Бы бал ое ой ога И и ды реееЫтый обои. ПВ Ву у а С ВЫ 
вает ББ бы фаир ЕО | ор Фан Е фай ее ПРАВ в, зе А. ета 
аа Бесы С Пия Гав ый ПОбадаи дооье ие сучоави [мадам Кона пешей крабы, Ра жен фи ай пов 


1% 


.з в 
а ТВ Коай 1о Вибомептен! 
: еси оз абенене ва релаНИ 


1 бриза лида, ъамиранйе КОМА, им вать СЫ пабения.. 


Тиз Ивье = о Ге Е 


р РОЙ ПО ое фа ен ый рой руны НЫ 
ии ыыы ыбдкьый Даны За ВЫ иь ол ай 
т 


Те па Фын Сагфев тб ма Ва года гы] тоеайАвые се Ле 

_Пыеркеьвый ель: той Бы говлбесь. Воона Ча ве АЗ «дани вая 
О м 
еее аа Паайьскт. Вваьй ый ИН ба ее 


80 ИТаг ; ТАм АБош? 

А 
вез. Пя Реп Пагбии вла Ли клас, форми, ты ого ера рас. Гр еще, ине ананЕ 
Ба када Цезйреья | ыы ВЫ. ОБЕТЫ ое вле окна в Пей фе ое оне о магу ор: "Ан 
лай Нтраденя КА вает, Ре аи Ты Ой Дар обои а ый овиров Аа, "ак, В, 


Заем И ый аи ИП 


СУ або слоте вый а оси ое фа ара ай а учтите оон. "Гь катубуе у А то ый 
Бонатиньй а вау Гай бква раеоьа мое ай о К ба о, а БР неа бла Фе, кыви ПРыв тя, 
ат рай 2 Вы Фоаьйа 3 са ай: а енаайа Пноолнме ерив вегенеати. "Перова, оба илсе йена 


Рис. 9 4 Основной дизайн 7еп багдеп, пропущенный через 
фильтры: имитирующий протанопию (вверху) и имитирующий 
дейтеранопию (внизу) 


ПРИМЕЧАНИЕ 


Фильтр, позволяющий имитировать цветовую слепоту, имеет- 
| ся на странице Со[отЬ та Меь Раде Рег (НЕЁр://со[от- 
А\ег.млскОпе.огд). 


ПРИМЕЧАНИЕ 


Цветной вариант рис. 9 см. на вкладке. 


+ протанопия/дейтеранопия. Эта форма расстрой- 
ства цветоощущения встречается реже, но более 
серьезна. Страдающие от нее не видят зеленого и 
красного цветов, оставаясь в желто-коричнево-си- 
нем мире. Болезнь называют также дихромазией. 


У каждой формы заболевания есть разновидности, при 
которых понижена или полностью отсутствует спо- 
собность различать комбинации красного, зеленого и 
реже — синего. Цветовой слепотой страдает примерно 
один человек из двенадцати, причем у мужчин она 
встречается гораздо чаще, чем у женщин, 


Как пользователю, страдающему цветовой слепотой, 
представляется дизайн, в котором используются недо- 
ступныеему цвета? Ограниченное цветовое восприятие 
может означать, что тщательно выбранная палитра ис- 
кажается до неузнаваемости, что особенно печально, если 
дизайнер хотел с помощью цвета передать какую-то 
информацию. Предлагать такому пользователю нажать 
красную кнопку бесполезно, ведь ему она кажется тем- 
но-коричневой или черной. Во многих случаях цвет эле- 
мента просто сливается с окружающей его областью, 
поэтому контрастность пропадает. 


У дизайнера нет надежного способа имитировать цве- 
товую слепоту. На первый взгляд кажется достаточным 
преобразовать дизайн к цветовой гамме, состоящей из 
оттенков серого, но результат не будет соответствовать 
тому, что видят большинство зрителей-дальтоников. 
Существуют фильтры, предназначенные для имитации 
разных видов цветовой слепоты, но они дают лишь 
некоторую аппроксимацию, особенности цветового 
восприятия уникальны у каждого больного. 


Что же делать, если сайт нельзя протестировать? В пунк- 
те 2 из «Рекомендаций по доступности веб-контента» 
(угу м3 ог ГИ МГСАСТО/®]-со|ог) предлагается пере- 
давать любую информацию не только цветом, но еще 
хотя бы одним способом: ссылка может быть синей и 
подчеркнутой, зеленая кнопка может сопровождаться 
иконкой или текстом, предупреждение может быть на- 
печатано красным и быть окружено сплошной рамкой. 


Единство стиля 


Когда говорят о том, что дизайн выдержан в едином 
стиле, имеют в виду равное внимание ко всем визу- 
альным аспектам. Вариант «В зеленых тонах» мог бы 
легко стать тяжеловесным и перегруженным, если бы 
не тесная взаимосвязь текстуры и цвета, шрифтов и 
орнаментов. Поскольку Лаура Макартур уделила мно- 
го внимания сбалансированности элементов дизайна, 
то окончательный результат оказался более впечатля- 
ющим, чем просто сумма отдельных частей. 
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Дизайнер Шарлотта Ламберт (Спа|о(е [атбе) 
\мимим.с$52епдагдеп.сот/068 


Баллада 


Использование воображения для создания визу- 
ального потока и направления взгляда зрителя 


Сама сущность сайта С$5 Геп Сагаеп распо- 
лагает к спокойному созерцанию, и именнос 
этого начала иллюстратор Шарлотта Лам- 
берт, приславшая дизайн «Баллада». Ламберт 
совершила мысленную прогулку по саду. 
А по пути ее воображению предстали различ- 
ные образы: лестница, небольшой мостик, 
потягивающаяся кошка. 


Выйдя из медитации и взявшись за кисть, она 
сделала несколько предварительных наброс- 
ков, чтобы уточнить идею дизайна. Затем она 
запечатлела картины, возникшие в мозгу во 
время прогулки. Сначала они были нарисо- 
ваны китайской тушью и белой краской на 
бумаге и даже на картонке из-под пива, а по- 
том с помощью РБо{о$Вор были подготовле- 
ны изображения для \У\еБ. 
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Рис. 2 + Изображение калитки в «Балладе». 
Это рисунок очень важен для данного дизайна 
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Рис. 1 4 Основной контент в «Балладе» отделен от 
навигационной и вспомогательной информации. Это один из 
способов привлечь внимание к содержанию и направить взгляд 
зрителя туда, куда хочет дизайнер 


Рис. 3 + От входа к лестнице - нас ведут по контенту как 
в метафорическом, так и в техническом смысле 


Как направить взгляд зрителя 


Как направить 
взгляд зрителя 


В хорошем дизайне взгляд перемещается в определен- 
ной последовательности от одной важной точки кдру- 
гой, причем зритель даже не сознает, что его внима- 
ние намеренно привлекают к тем или иным местам на 
странице. Именно таким способом дизайнер передает 
свою идею, не становясь назойливым. 


Чтобы направить взгляд, с помощью контента и гра- 
фических образов создается визуальный поток, дви- 
жущийся от одного важного места к другому. В «Бал- 
ладе» мы наблюдаем отчетливое и вместе с тем 
ненавязчивое воплощение этой идеи. 


Вынесение средств перемещения по сайту, ссылок на 
архивы и прочие ресурсы в левую часть отделяет на- 
вигационный контент от основного (рис. 1). Многие 
пользователи привыкли искать навигационные ссыл- 
ки в левой или верхней части страницы, поэтому раз- 
мещение их именно там позволяет посетителю сосре- 
доточиться на главном содержании. 


В дизайне Ламберт взгляд скользит от раздела к раз- 
делу, какесли бы мы действительно прогуливались по 
саду. Мы начинаем с калитки (рис. 2), спускаемся по 
ступенькам (рис. 3) и идем дальше. У каждого участка 
сада свой неповторимый облик и достаточно места для 
контента. Заголовки описывают, что находится в каж- 
дом разделе, тем самым смысл контента интегрирует- 
ся с визуальным потоком. 


Еще одно важное средство направить.взгляд- оставить 
места, на которых глаз может отдохнуть. Обычно это 
достигается за счет размещения пустых белых участ- 
ков (рис.4).С помощью цвета можно привлечь внима- 
ние читателя к ключевым местам на странице, а различ- 
ные фигуры и линии задерживают взгляд и усиливают 


этот эффект. 


В «Балладе» дизайнер решил поместить основной кон- 
тент в блоки белого цвета, что создает хороптий контраст 
для чтения и оставляет достаточно свободного места, на 
котором глаз может отдохнуть от напряжения, И хотя 
цветовая гамма исключительно проста и состоит толь- 
ко из коричневого, черного и белого цветов, она тем 
не менее интригует. Это зимний сад? Или осенний: 
Этот вопрос овладевает сознанием и заставляет искать 
дополнительные визуальные ключи для разгадки. 


И, наконец, листья (рис. 5), вода, мостики, отпечатки 
лап (рис. 6) — все это необычные детали, за которыми 
следует взгляд зрителя, неустающего удивляться ост- 
роумию и прихотливости автора, 


В терминах С$$ 


В последние годы появилось целое поколение дизайне- 
ров новой школы, которые не мыслят в терминах тра- 
диционных для НТМЁ табличных методов верстки. Вме- 
сто этого напервый план выходит применение С5$. Хотя 
все варианты дизайна на сайте С55 Реп Сагаеп предпо- 
лагают именно такой подход, но есть еще много дизай- 
неров старой школы, которые цепляются за слишком 
жесткие и зачастую более сложные методы верстки на 
основе таблиц. В «Балладе» автор выстроил макет сразу 
с помощью С$5. А что, если бы это было не так? 


Беды старой школы 


Если взглянуть на этот дизайн с точки зрения пред- 
ставителя старой школы, то быстро выясняется, что 
создание чего-то подобного с помощью таблиц вы- 
ливается в кошмар. Возьмем всего два раздела из ос- 
новной части страницы и попробуем построить для 
них макет в Масготе а Егемуогк$, пользуясь инстру- 
ментом для разрезания картинок. Получившиеся ку- 
сочки нужно будет поместить в таблицу: 
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пиОНу [5 ассерзЫе, офиом рогподгарву мм Бе ге]ес1е9 

Тю 5 э енто ехегсве э5 ме аб а Чепопэмавоп. Уоц теап 
№ сорупо" оп усуг бгармс$ (мВ №МиИед ехсернопе, ее 
Бытие здеНие=), Буй ме ак усы гееазе усуг С55 ипфег з 
Ства\ме Сотитопв Псейбе. Чета! 10 Ме ое оп Те 508 60 а 
оТАегв ау ватт Роги усе мог 


Вапды А огасюузу допайей Бу ОгелииРге 319 


Рис. 4 + Обилие свободного пространства в каждом блоке 
позволяет глазу отдохнуть и создает условия 
для комфортного чтения 


Рис. 5 + Тропинка, ведущая к выходу из сада, усыпана листьями 


Е № р 
ры 
М. | и 


Рис. 6 + Нарисованная кошка восседает в правом верхнем углу. 
«Баллада» изобилует приятными деталями, зрителю есть на что 
полюбоваться 


ПРИМЕЧАНИЕ 


Хотя макет на основе (55 обычно прорисовывается быстрее и 
более плавно, чем сложная табличная верстка, но известен так 
называемый феномен «появления нестилизованного контен- 
та». Он возникает в браузерах ТЕ, когда С55 импортируется, а 


не присоединяется по ссылке, Если в заголовке документа _ 


присутствуют элементы ]1пК или зсе1ре, то этот феномен 
не возникает. Во все варианты дизайна 055 2еп багдеп вклю- 
чен элемент всу1ре, чтобы устранить эту проблему, поэтому 
| прорисовка протекает гладко. Подробнее о феномене появле- 
ния нестилизованного контента см. ВЕЁр://мммм,шетоБо*.соту/ 
миеб/с$5/Роис.а5р. 


ПРИМЕЧАНИЕ 


Обертывать картинки заголовочными элементами полезно, 
когда графика является неотъемлемой частью заголовка, При- 
менение такой техники подстановки изображений на сайте (55 
Геп багдеп обсуждается в главе 4. 


Из этого кода видно, что макет усложняется в несколь- 
ких отношениях: 


+ при табличной верстке возникает много лишней 
разметки, 


+ применение пустых картинок в качестве раздели- 
телей вместо полей и отступов, имеющихся в С$$, 
без необходимости увеличивает «вес» страницы; 


$ большая часть картинок включена в саму размет- 
ку, что увеличивает размер файла за счет дополни- 
тельных тегов, а значит, и время загрузки; 


+ табличный дизайн по своей природе должен оста- 
ваться неизменным на всех страницах сайта. На 
каждой странице будет присутствовать разметка 
таблицы и всетеги <ипе>, поэтому картинки и ком- 
поненты страницы перерисовываются при каждой 
загрузке. В случае С55 макет кэшируется, а для сай- 
та С$$ Иеп Саг4еп код, управляющий изображени- 
ями, загружается только один раз. 


Конечно, все эти проблемы характерны для любых 
таблиц. Большинство дизайнеров понимают, что чрез- 
мерное использование таблиц может быть причиной 
и других неприятностей, в том числе и в плане дос- 
тупности, поскольку многие программы чтения с эк- 
рана, предназначенные для слепых, неправильно ин- 
терпретируют содержимое таблиц. А если учесть 
основной смысл данной работы - направление взгля- 
да зрителя — то становится очевидным еще одно: не- 
уклюжий старый подход разруитает впечатление не- 
прерывности потока, поскольку сложный табличный 
макет обычно прорисовывается кусками. 


Подход новой школы 


С помощью С5$5$ гораздо проще создать дизайн, кото- 
рый будет загружаться и прорисовываться без рывков, 
приятно для глаза. Вместо сложных таблиц, нареза- 
ния изображений и применения графических разде- 
лителей дизайнер может сосредоточиться на стилиза- 
ции отдельных элементов. 


Мы вовсе не хотим сказать, что в дизайне на основе 
С$$ вообще не должно быть встроенной графики. 
Конечно, это имеет смысл делать, когда графика 
привязана к контенту, например, если нужно поме- 
стить фотографию директора на странице «О ком- 
пании» или снимок с экрана на сайте фирмы, про- 
изводящей программное обеспечение. Суть в том, 
чтобы отделить изображения и другие элементы, 
служащие исключительно для презентационных 
целей, то есть являющиеся частью дизайна, а не са- 
мого контента. 


Ниже показано, как графика, используемая в основ- 
ной части страницы, задается с помощью фона заго- 
ловочных элементов: 


#ргеатю]е №3 ( 

Баскогоцпа: иг1(гоа@а.)ру9) сор 1еЕЕ по-гереас; 
РезанеЕ: 106рх; 

} 

#ехр]аплаелоп НЗ { 

Баскагоциа: ик1(аБоцЕ.3ра) вор 1еЕЕ по- 
тереас; 

пезане: 168рх; 

} 

#йрагЕ1тстраетой 13 { 

БаскагомпА: иг1 (рагЕ1с12.3р9) бор 1еЁе по- 
гереаг; 

Везайе: 154рх; 

утаЕн: 56595х; 

} 

#БепеЕзев 13 { 

Баскагониа: иг] (БепеЁё.)рдч) ор 1еЁс по- 
гереае; 

ВезаНе: 171рх; 
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#геди1тешепев [3 { 

Баскагоцпа: иг1(геа.)ру)} сор 1еЕЕ по-гереас; 
НезоНе: 125рх; 

} 


С помощью расширения \!еь ОеуеЮрег для браузе- 
ров Мо2Ша и Мо2Ща Еиегох можно включить прори- 
совку контуров для блочных элементов и увидеть 
идентификаторы и классы всех элементов (рис. 7). Это 
очень удобно, когда нужно узнать точное расположе- 
ние различных секций в дизайне, 


ПО няенык дви сер не Мом в чу Чей ря, 
В Хы в Вера, ВЫ бы Ро БИ 
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Поместив контент внутрь элементов и применив на 
странице фоновую графику, дизайнер достиг сразу 
нескольких важных целей: 
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+ за счет более простой разметки уменьшился вес 
страницы; 


+ вынесение большей части (или всего!) оформления 
в таблицу стилей способствует ускорению загруз- 
ки сайта, поскольку С$5-файлы кэшируются и бра- 
узеру не нужно повторно интерпретировать ин- 
формацию о стилях при каждой загрузке страницы; 
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+ сайт становится более доступным, так как в самом 

документе нет никаких презентационных элемен- 
ить И у 
тов; ее 
ЕЯ ЕАИС 


+ сайтом становится проще управлять, Предполо- 
жим, что с приходом весны мы хотели бы обновить 
«Балладу», включив зеленые и золотистые цвета 
вместо той понурой гаммы, в которой она нарисо- 


вана сейчас. (55 позволяет справиться с этой зада“ полезные инструменты, имеющиеся в расширении Ме Оемеорег 
чей намного легче и с меньшими накладными рас- — для Мозйа и МогИа Агеох. Здесь для каждого блочного 
ходами, так как мы заранее подумали о гибкости — элемента нарисован контур, так что видно, каким образом 
дизайна. дизайнер сверстал страницу и использовал фоновую графику 


Рис. 7 + Дизайн «Баллада», как его показывают различные 


| В поисках моста в 


ПРИМЕЧАНИЕ | 
Загрузить расширение \еЬ Беуеорег для Мо2Ща и Мо2Ща 


АгеГох можно со страницы Вр://сппзредейск.сот/могк/ 
Агегох/меБЧеуеорег, 


В поисках моста 


Эффективное проектирование веб-страницы — непро- 
стая задача. Дизайнеру приходится учитывать многие 
факторы. В «Балладе» наглядно продемонстрировано, 
как можно с помощью дизайна направить взгляд зри- 
теля, с помощью цветов передать настроение и как 
использование С$$ вместо таблиц может повысить 
качество сайта. Нам кажется, что дизайнер-новичок, 
сразу начавший с изучения С$$, будет свободен от ог- 
раничений и условностей, налагаемых традиционной 
техникой, 


Для дизайнеров, которые переходят на С$$ от таблич- 
ной верстки, трудно вырабатывать новый способ 
мышления. Бесспорно, что С55 позволяет выйти за 
рамки многих ограничений, когда мы делаем наброс- 
ки, работаем в РВотоз$Пор, готовим разметку и приме- 
няем к ней стили. Но вот найти мост, соединяющий 
разные технологии, — это проблема. Продемонстри- 
ровав удачное сочетание творческого воображения, 
живописи и С$5, Шарлотта Ламберт призывает дизай- 
неров пройти по мосту и взглянуть на мир по-ново- 
му. Она доказала, что новые прогрессивные методы 
работы могут освободить нас от пут традиционного 
веб-дизайна. 


Дизайнер Дэйв Ши (Пауе 5Йеа) 


мииим/.с$52епдаг4епт.сот/064 


Ночная поездка 


Преобразование статической модели сайта в 
код и решение возникающих попутно задач 


ЖЕ жт — ес а иен - = = 2 — в =: = => авиа а = 2 
== =" = тв г. == ЗЕЕ ь- деи = ааа 22 8 жа жк т = -^ = РЕ ПЕТРЕ = РыШЕ Ш ШЕЕ. 


Вспоминается: поездка по городу вскоре пос- 
ле наступления сумерек, из динамиков зву- 
чит мелодия, исполняемая на саксофоне Джо- 
ном Колтрейном, за окном проносятся 
желтые огни, глубокая синева неба над голо- 
вой, В «Ночной поездке» Дэйв Ши решил вос- 
создать настроение летнего вечера. 


Темная палитра создает неяркий, теплый тон. 
Темно-оранжевый цвет текста и графики 
уравновентивается яркими оранжевыми пят- 
нами, чтобы цветовая гамма не казалась из- 
лишне коричневой. Вдобавок местами в тек- 
сте и на фотографиях посверкивает синий 
цвет, чтобы не было ощущения монотонно- 
сти, но контраст специально ослаблен и сде- 
лан спокойным. 


Фотографии были выбраны из-за цвета и те- 
матики: когда вы едете на маптине после за- 
хода солнца, то ожидаете увидеть приглушен- 
ные огни, гладкую как зеркало поверхность 
воды и неясную синеву неба над горизонтом. 


Рис. 3 + Заголовок, разрезанный на куски 


0$5 


дагаеп 


Визуализация кода 


Когда Ши готовил дизайн «Ночной поездки» в АдоЬе 
РуоозВор, он мало задумывался о том, как будет пи- 
сать код. Сначала надо подготовить графику, а реали- 
зацию можно отложить на потом, 


Но как превратить статическую модель в интерактив- 
ный сайт: Когда дизайн разбивается на куски, прихо- 
дится сохранять разные изображения, которые позже 
предстоит собрать воедино с помощью С5$$. Не суще- 
ствует четких правил, описывающих эту процедуру, 
ключом к успеху является гибкость. Если заранее 
иметь в виду альтернативы, то принять решение бу- 
дет проще. 


Альтернативные 
варианты 


Рассмотрим заголовок «Ночной поездки» -— набор со- 
стыкованных прямоугольников, на которые наложе- 
на яркая желтая эмблема (рис. 1). Здесь есть две про- 
блемы: заполнить область фотографиями и линиями, 
а затем наложить поверх эмблему, задав для нее про- 
зрачный фон, Поразмыслив, Ши остановился на двух 
возможных подходах: 


+ подготовить одну большую картинку, сохранив ее 
в формате ]РО сочень малым коэффициентом сжа- 
тия, чтобы избежать искажения линий. В результа- 
те получился бы файл большого размера; 


+ разрезать картинку на куски, а затем собрать их 
воедино, привязав к различным элементам внутри 
#{раченеа@ег и #ехЕгар1уз в конце страницы 
(куски, привязанные к последним элементам, мож- 
но поместить наверх с помощью абсолютного по- 
зиционирования) (рис. 2). 


Ши выбрал второй способ, но только не стал превра- 
щать все прямоугольники в отдельные картинки, а 
поместил каждую’‘из двух фотографий в ]РС-файлы 
(рис. 3). Текст «с5$ Деп Сагдеп» был сохранен в фор- 
мате СТЕ, а все‘остальное стало одним С1Е-файлом с 
высоким коэффициентом сжатия. И вместо запутан- 
ного кода для сборки заголовка получилась ясное со- 
четание различных методов верстки с одновременным 
использованием СР и ]РС-файлов. 


_ Дизайн 


После того как файлы были сохранены, настало время 
подумать о том, как их собрать: какие картинки к ка- 
ким элементам присоединить: Разумное использование 
атрибута Баскагоцпа-1мщаде и техники подстанов- 
ки изображений сделало ответ очевидным: поскольку 
внутри раздела #радеНеа@ег элементов для этой цели 
недостаточно, следовало прибегнуть к элементам 
#+ехсгар1 т, находящимся в конце документа. В резуль- 
тате основная фоновая картинка была присоединена кэле- 
менту 11, а заголовок «с$$ еп Саг4еп» - к элементу |2. 


Ниже код, относящийся к этим изображениям, выде- 
лен цветом: 


В] ( 
утаей: 770рх;: 
Везане: 166рх; 


2 { 

мтаер: 244рх; 
пезавЕ: 42рх; 
Баскотовна: 3 

Сы оое р 5 |. 
ров1Е1ой: абво1аее; 
гор: 120рх; 

мага1п:; 0; 
мага1п-1еЕс: 495рх; 


11 эрап, №2 эрап { 
Я1зр1ау:попе; 


} 


Дополнительные стили для зрап скрывают текст, вме- 
сто которого подставляются изображения, хотя этот 
метод сейчас считается устаревшим. 


Магия абсолютного 
позиционирования 


Итак, для размещения фотографий все тотово, но при 
попытке включить их в заголовок возникает новая 
проблема: абсолютное позиционирование плохо со- 
четается с центрированием. Чтобы обойти эту труд- 
ность, Ши применил полезный трюк: он позицио- 
нировал родительские элементы вдоль левого края 
экрана, задав для них атрибут м1 аЕН равный 100%, 
чтобы растянуть на всю ширину окна браузера, 
а дочерние элементы - в данном случае зрап - цент- 
рировал в пределах родительских. 


С учетом компенсации различных ошибок в браузе- 
рах получился такой код: 


}ехега01\1 { 
розфе1оп: абёо1чаее; 


ПРИМЕЧАНИЕ 


Методы подстановки изображений и связанные с ними про- 
блемы обсуждаются на странице ммм. ${ордез1ат.сот/ 
а с(ез/тгер[асе_{ехё. 


ПРИМЕЧАНИЕ 


Значение рааа1 пд должно быть больше, чем вы ожидаете. 


| Если задать для райа1па-глаНе величину 100 рх, то эле- 


мент сместится лишь на 50 рх от центральной оси. 


Ловкость р 


Бор: 41рх; 

1еЕ6.: 0; 
сехе-а119а.: сепсег, 
изаЕН: 100%; 

} 

#ехега01\у] зрап { 
БаскагоипЯ: ЕгапврагепЕ цг1 (дгапуз11е.)рд) 
Еор 1еЁЕ по-гереае; 
415р1ау: Б1оск; 
мата1п-1еес: ацесо; 
мага1п-тзоНнЕ: ацбо; 
ВезоаНЕ: 123рх; 
утаЕн: 770рх; 

} 


Так как элемент центрирован, а добавление раЯа1пча 
увеличивает ширину элемента, то отступ равномер- 
но распределяется по обе стороны. 


Это сработает, если дочерний элемент должен ока- 
заться точно в центре, но если это не так? Задание 
для дочернего элемента свойства ра@Я1па увели- 
чивает его общую ширину, отодвигая тем самым от 
центра. Трюк здесь такой: отступ расширяет элемент 
и влево, и вправо, значит для достижения желаемо- 
го результата значение необходимо удвоить. Кро- 
ме того, отступ сдвигает элемент в направлении, 
противоположном тому, к которому он применен, 
следовательно, чтобы сдвинуть картинку влево от 
центра, надо задать свойство раЯа1п9-г1арве, и 
наоборот. 


Ловкость рук 


Разобравшись с заголовком, Ши столкнулся с новой 
проблемой при попытке увязать его с остальным кон- 
тентом. Он хотел разделить колонки двойной верти- 
кальной линией, но попытка применить к каждой ко- 
лонке фоновое изображение, повторяющееся по 
вертикали, оказалась неудачной. Левая колонка 
(#11 7КГ1 Е) не расширялась по вертикали на нуж- 
ную величину, а правая в действительности состоя- 
ла из трех разных элементов Я1\у (#асцтскбитшлтагу, 
#ргеапЪ1е и #зиррогЕ1паТехе). 


Не имея единственного элемента, к которому можно 
было бы присоединить фоновую картинку, он присо- 
единил ее ко всем трем, предположив, что они будут 
иметь одинаковую ширину и, значит, выровняются по 
горизонтали: 


#чи1сКкУшилаку, #ргеатЬ1е, #вирроеетаоТехе { 
Баскагоспа: сгапзрагейле \:1(694.91Е) Сор 1еЕЕ 
гереаЕ-у; 
тата: 000 4005х; 
этаЕн: 342рх; 

} 


Они и выравниваются, только возникает неожидан- 
ная сложность: между а1\ образуется вертикальный 
разрыв (рис. 4). Но ведь поля ни для одного @1у явно 
не заданы, откуда же он берется? 


Схлопывающиеся поля 


В модели прямоугольных областей, принятой в С55, 
есть одна странность, получившая название схлопы- 
вающихся полей. Это означает, что если два элемента 
располагаются один над другим, причем для обоих 
заданы ненулевые поля и при этом нет ни отступов, 
ни границ, ни еще каких-либо явных условий, то пол- 
ная высота поля будет меньше суммы двух полей. Так, 
поля шириной 20 пикселей не дадут в сумме проме- 
жуток шириной 40 пикселей, вместо этого поля схлон- 
нутся, и вы получите все те же 20 пикселей. 


Но какое отношение это имеет к вышеупомянутой 
проблеме разрыва? Эффект схлопывания распростра- 
няется как на родительские, так и на дочерние элемен- 
ТьЬ поскольку ДЛЯ атм не заданы вертикальные ПОЛЯ, 
то нижнее поле ау схлопывается с нижним полем 
последнего дочернего абзаца. А так как полная вели- 
чина поля отлична от нуля, то необходимо оставить 
заданное для абзаца поле шириной 10 рх. Вот его-то и 
видно в нижней части объемлющего Я1\ (рис. 5). 


Коль скоро диагноз поставлен, проблему легко испра- 
вить. Если добавить к Я1у небольшой вертикальный 
отступ в 1 рх, то условия, необходимые для схлопы- 
вания полей, перестают удовлетворяться и разрыв ис- 
чезает: 


в а1тскбиптаку, 
Баскахгойпа: 
тереае-у; 
таго1й;: 0 00 400>х; 
‘п грааата: 1рх 0; 
итаен: 342рх; 
} 


#ргеапЬ]е, #зиррогЕ1паТехе { 
сСгапзрагепе чу] (694.091Е) Еор 1еЕЕ 


Фокусы с графикой 


Определивитись с заголовком и телом страницы, мож- 
но обратить внимание на эмблему в верхнем правом 
углу. Размещение картинки с прозрачными областя- 
ми (в данном случае с тенью) поверх другой графики 
обычно означает, что при сохранении картинки надо 
учитывать, что же именно она перекрывает. Ши мог 
бы объединить слои в модели РАо{озВор и сохранить 
окончательное изображение эмблемы в формате СТЕ 


Рис. 4 + Разрывы между границами 


ПРИМЕЧАНИЕ 


Схлопывающиеся поля определены в спецификации (55 2.1 
следующим образом: «под схлопыванием полей понимается | 
тот фак”, что примыкающие друг к другу поля (без проме- 
жуточного контента, отступов и границ или иного разде- 
ляющего их промежутка) двух или более прямоугольных 
областей (соседних или вложенных) объединяются в одно 
поле», (‘мили м3 .отд/ТВ/С5521/ Бох.НЕтсоЦарятд-тагап$). 


Рис. 5 + Поля абзаца проступают сквозь поле объемлющего ау 


Рис. 7 + Эмблема, сохраненная без фона в виде СЕ -файла 
с ограниченной прозрачностью 


Рис. 8 + Эмблема, сохраненная в виде прозрачного РМ№б-файла, 
наложенная на белый фон 


Рис. 9 + Эмблема, сохраненная в виде прозрачного РМб-файла, 
наложенная на фон с текстурой 


Один маленький шажок 


или ]РЕС вместе с нижележащими фрагментами фо- 
тографии и линий, чтобы сберечь эффект прозрачно- 
сти (рис. 6). А мог бы вместо этого удалить фоновые 
области и сохранить только прозрачный СГЕ, пожерт- 
вовав большей частью теней (рис. 7). 


Но поскольку эмблема считается не столь важным 
графическим образом, Ши решил воспользоваться 
форматом РМС и избавить себя от некоторых слож- 
ностей. В формате РМС с 256 уровнями альфа-про- 
зрачности эффект тени не пропадает, на каком бы 
фоне ни выводить изображение. На рис. 8 и 9 показа- 
но, как выглядит эмблема на двух разных фонах. 


Ниже мы обсудим формат РМС более подробно, а 
пока отметим лишь, что браузер Мсгозой Пцегпе 
Ехр|огег для Ма 4о\5 не понимает, что такое альфа- 
прозрачность, поэтому РМ№С-файл необходимо от 
него скрыть. Проще всего воспользоваться для этой 
цели селектором дочернего элемента, который этот 
браузер не поддерживает, и таким образом предла- 
гать РМС-файл лишь тем браузерам, которые способ- 
ны его нарисовать. 
ВЕп1>Боау фехегаа1\у4 врап { 
Баскагоипа: Егапзрагепе чг1(5еа1.91Е) бор 


Е1аНЕ по-гереае; 
} 


Очевидно, в более формальном веб-проекте поддерж- 
ка со стороны Ицегпе! Ехрюгег даже для графики не 
первостепенной важности необходима. Хотя функци- 
ональность одноуровневой (да/нет) прозрачности в 
формате СЕ более ограничена, но все же ее достаточ- 
но при надлежащем планировании. На сайте Иеп 
Саг4еп эксперименты поощряются, но у ваших кли- 
ентов может быть другое отношение. 


Один маленький шажок 


Если в начале работы имеется лишь простая модель, а 
сроки поджимают, то, разработать полный макет на 
основе С55 может оказаться довольно трудно. Ключ к 
решению - разбить задачу на более мелкие; так, для 
верстки заголовка в «Ночной поездке» понадобилось 
два шага. 


Если заранее знать о существовании разных возмож- 
ностей, то, столкнувшись с трудностями, вы сможете 
принять более верное решение, будь то смена моде- 
лей позиционирования, регулировка полей или при- 
менение какого-либо эффекта к элементу. 


Задний двор, с. 92 Энтомология, с. 98 


Прет-а-порте, с. 110 Монах, с, 116 


Белая лилия, с. 104 
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Верстка 


Для верстки страницы с помощью С$$ необ- 
ходимо сочетаниетехнических знаний итвор- 
чества. Выбираете ли вы фиксированную или 
текучую верстку, выравниваете ли по левому 
краю или центру, в любом случае нужно чет- 
ко понимать, как устроен макет в С55. 


В этой главе мы рассмотрим разные подхо- 
ды кверстке, схемы позиционирования, при- 
менение плавающих элементов и научимся 
сочетать все это для получения полезного, 
привлекательного и - в некоторых случаях — 
неожиданного результата. 
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Дизайнер Рэй Генри (Кау Непту) 
М/и/м/.с552епдагдепт.сот/029 


Задний двор 


Абсолютное позицион ирование 
и плавающие элементы 


Иногда не знаешь, с чего начать новую работу, 
но источник вдохновения можно найти везде, 
Немало ярких идей, изменивших мир, заро- 
дилось в кафе за чашкой кофе с молоком и ин- 
тересной беседой. Рэй Генри встретил свою 
музу в двух садах — Геп Саг4еп и своем соб- 
ственном. Так появился на свет «Задний двор». 
Цветовая гамма этого дизайна пришла с фото- 
графии, на которой запечатлены цветы, расту- 
щие в саду на заднем дворе дома Генри. 

Хотя дизайн с тремя колонками выглядит 
очень традиционно, у Генри во время работы 
возникло немало вопросов, и он поначалу не 
был уверен, что сумеет воспроизвести таблич- 
ный макет с помощью С$$. Удастся ли помес- 
тить ссылки в правую колонку? Как это сде- 
лать? Может быть, для достижения нужного 
эффекта нужно верстать совсем по-другому? 
Но методом проб и ошибок Генри все-таки 
разрепгил все проблемы поочередно. 


3 Основы макета 193 


ПРИМЕЧАНИЕ 


Действительно, многоколонные схемы верстки в (5$ явно не. 
присутствуют, однако С5$-таблицы допускают и такой спо- 
соб макетирования. Введены они в спецификации (552, но, к 
несчастью, Тт(егпе{ Ехр(огег для МНпо\$ их не поддержива- 
ет, так что большого смысла в них пока нет, А жаль. Подроб- 
нее о (55-таблицах см. документ по адресу ммм, м3 .ога/ТК/ | 
(5521/4аЩез. ти. 


Тпе Воаа то Еп!Намептетт 


Ицегпо а Фагк апд Огеагу гоад 1ау Пе 
разг ге|с$ ог Бгомизег-вресс га05, 
мсотранЫе СОМ, апа Бгокеп С5$5 
5ирром. 


Рис. 1 + Элементы в нормальном потоке документа 


Иегит9 а ФагК ап Фгеагу гоад ау Ме 
разг геИс$ о! Бгомизег-ресс 1ад$, 
псотраНЫе ООМ5, апд Бгокеп С$$ 
5ирром. 


Тйе Воа@ то Ей! мептет 


Рис. 2 + При абсолютном позиционировании заголовок _ 
изымается из нормального потока документа, а на его месте 
оказывается следующий абзац 


Основы макета 


Чтобы сверстать страницу с несколькими колонками, 
необходимо кое-что знать о С$$. Не существует свой- 
ства «1еЁе-софити: 200рх», которое волшебным 
образом создало бы нужные колонки, поэтому при- 
ходится прибегать к различным трюкам. 


Для создания макета, состоящего из колонок, есть два 
основных способа, и у каждого из них свои достоин- 
ства и недостатки. Из четырех схем позиционирова- 
ния, имеющихся в С5$ (аб 5оие, “айс, ге|аНуе и Яхед), 
только абсолютное позиционирование позволяет 
изъять контент из нормального потока и поместить 
его в произвольное место. С другой стороны, хотя тех- 
нически плавающие элементы нельзя назвать схемой 
позиционирования, но таким образом С$$ позволяет 
зарезервировать место так, что остальное содержимое 
документа будет обтекать его. 


Любой из этих методов обеспечивает контроль над эле- 
ментами, достаточный для создания многоколонного ма- 
кета. Плавающие элементы и абсолютное позициониро- 
вание можно использовать как вместе, таки порознь. 


Абсолютное 
позиционирование 


Из двух вышеупомянутых методов абсолютное по- 
зиционирование проще для понимания. Если раз- 
мещать несколько элементов один за другим (это 
называется нормальный поток документа), как в 
НТМЕ-разметке ниже, то получится линейная пос- 
ледовательность, изображенная на рис. 1. Этого и 
следовало ожидать. 
<Н1>Это заголовок®/й1> 


<р>Это текст</р> 
<р>А это’ другой текст</р> 


Применение к какому-либо элементу абсолютного 
позиционирования перемещает его (в данном случае 
заголовок) в указанное место, а оставшаяся «дырка» 
схлопывается (рис. 2). Абсолютно позиционирован- 
ный элемент не оказывает влияния на своих соседей, 
Все выглядит так, как будто этого элемента вообще 
нет в документе (хотя мы его прекрасно видим). Син- 
таксически конструкция выглядит примерно так: 


НЗ { розтЕтоп;: аБво1аее; Бор: 100 рх; } 


Достоинство метода абсолютного позиционирования 
в том, что он обеспечивает точный контроль над по- 
ложением данного элемента. Но раз элемент изъят из 
нормального потока, то он не может воздействовать 
на остальные элементы. Иногда это становится про- 
блемой, как мы покажем в следующем размере. 


Плавающие элементы 


С плавающими элементами разобраться сложнее, по- 
этому мы прибегнем к помощи рисунков. На рис, 3 
показан длинный фрагмент текста; если поместить в 
него фотографию, то она, естественно, займет какое- 
то место, а остаток текста сдвинется вниз (рис. 4). Что- 
бы избежать разрыва, нужно, чтобы текст заполнил 
свободное место справа от фотографии (рис. 5). 


Именно в этом и состоит суть плавающих элементов 
в С5$: фотография вставляется в текст и делается пла- 
вающей, а текст обтекает ее, чтобы не было уродливо- 
го разрыва. 


Синтаксис прост, но овладеть им нелегко. Фрагмент 
таблицы стилей, описывающий только что рассмот- 
ренный пример, мог бы выглядеть примерно так: 


+рносо { Е1оабс: 1еЕс; шагд1п: 10рх 10рх 10рх 0; } 


Достоинство верстки методом плавающих элементов 
состоит в том, что элемент не изымается из нормаль- 
ного потока и соседние элементы знают о его положе- 
нии, Но из-за различий в поддержке со стороны брау- 
зеров плавающие элементы тоже не всегда идеальны 
для макетирования, и для того чтобы выбрать один 
из двух методов, необходимы некоторые практичес- 
кие познания. 


Методы верстки 


Разметка в примере ниже содержит базовые блоки для 
организации трех колонок и хвостовика. Главная об- 
ласть контента располагается в коде раньше обеих бо- 
ковых колонок. Это сделано для удобства поисковых 
машин и ради пользователей, которые при просмот- 
ре страниц отключают поддержку С55: чем раньше 
текст появляется в НТМГ-коде страницы, тем мень- 
ше элементов навигации и прочих ссылок придется 
пропустить, чтобы добраться до важного контента, 
<Я1\у 1а="мигаррег"> 
<а1у 1а="сопеепеАгеа"> 
<р>(здесь заголовки и текст) </рь 
</@1\> 
<@1\у 194="1еЕЕРапе1"> 
<р>(здесь ссылки и различные текстовые 
элементы) </р> 
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Рис. 4 + После добавления фотографии в тексте 
образовался разрыв 
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Рис. 5 + Текст обтекает фотографию и заполняет разрыв 


СОВЕТ 
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Рис. 6 + Простой макет с тремя колонками 


= Ба {- 


|+ 772 ини 17 Ввенежинено 


Рис. 7 + Тот же макет, но выровненный по центру 


Методы вер 


</а1\у> 
<Я1у 19=»г1апЕРапе]1»> 
<р> (здесь ссылки и различные текстовые 

элементы) </р> 

</Аа1\> 

<Яа1\\ 19=»Еоссет»> 

<р>(Авторское право, ссылки и т.д.) </р> 

</91 > 

</ат\> 
Чтобы по-быстрому сверстать макет, в котором ис- 
пользуется абсолютное позиционирование, не нужно 
долгого планирования. Задайте для всех трех колонок 
фиксированную ширину, позиционируйте каждую из 
них, ведя отсчет от левого верхнего угла документа, и 
временно забудьте О ХВОСТОВИКеЕ. Получится так, как 
это изображено на рис. 6. 

#сопсепедгеа (1961: 450рх; роз1етоп: 

аъ5о1аЕе; гор: 0; 1еЁЁ: 150рх; } 

#1еЕЕРапе1 {мтаЕВ; 150рх; роз с1оп: абзо1аее; 

сор: 0; 1е2: 0} 

#х19пЕеРапе!1 {мтаЕН: 150рх; ро5з161оп: аБзо1иее; 

сер: 0; ТеЕЕ: 600рхг} 

#Еоосег {Ч41вр1ау: пода; } 


Сейчас все прижато к левому краю, а как можно от- 
центрировать (рис. 7)? Легко. Модель позициониро- 
вания обладает полезной особенностью: если вы аб- 
солютно позиционируете элементы, содержащиеся в 
другом элементе, который тоже абсолютно позицио- 
нирован, то значения Бор и 1еЕЕ отсчитываются не 
от положения корневого элемента Всп] (то есть отле- 
вого верхнего угла окна браузера), а от левого верхне- 
го угла объемлющего элемента. 


Непонятно? Объемлющий элемент ведет себя как но- 
вая точка отсчета для абсолютного позиционирова- 
ния всего, что в нем находится. Поэтому если элемент 
#игаррег позиционировать и центрировать, то все 
колонки останутся внутри него. Приведенная ниже 
таблица стилей показывает, как связать все это воеди- 
но (свойство сСехЕ-а11ап включено для того, чтобы 
обойти «глюк» в Ниегпе Ехрюгег 5 для \М/иа4о\у$, ко- 
торый не центрирует элементы со свойством пага1п, 
равным айёо). 
Боау { 
сехе-а]1191п: сепеег; 


} 
Фигаррег { 


утаен: 750рх; 
магдап: 0 ацЕо; 
сехе-а113а; 1еЕС; 
роз1Е1оп: ге]1аЕ1уе; 
} | 

#сопсепеАгеа { 
итаЕН: 450рх; 
роз1Е1оп: абзо1иасе; 


Бор: 0; 

1еЕс: 150рх; 

} 

#1еЕЕРапе1 ({ 

мтаЕй: 150рх; 
ров1е1оп: абвоиеа; 
ор: 0; 

Т1Теё ЕЁ: 0 

} 
#г1анеРапе1 ( 

итаев: 150рх; 
роз1Е1оп: абзо1аее; 
Бор: 0; 

1ТеёЁ: 600рх; 

} 


Но что делать, если нужен хвостовик? Поскольку аб- 
солютно позиционированные колонки не влияют на 
соседние элементы, то хвостовик их игнорирует и рас- 
полагается так, какесли бы этих колонок несущество- 
вало. В данном случае он окажется первым элемен- 
том на странице. 


Чтобы решить эту проблему с помощью абсолютно- 
го позиционирования, нужно заранее знать высоту 
каждой колонки и задать позицию хвостовика так, 
чтобы он оказался в самом низу, Не обращаясь к 
Гамазстрь, сделать это невозможно, остается только 
перейти от абсолютного позиционирования к плава- 
ющим элементам. 


На рис. 8 хвостовик автоматически позиционируется 
под колонками благодаря использованию плавающих 
элементов. 


Боау { 
сехс-а119ап: 
} 

#игаррехк { 
итаев: 750рх; 
пага1п: 0 ацЕо; 


сепсег; 


сехЕ-а]11ап: 1еЕе; 
ров1Е1оп: геё]1ас1уе; 

} 

#сопсепеАгеа ( 
итасй: 450рх; 
Е]оаЕ: 1еЕЕ; 

} 

#]1еЕЕРапе]1 { 
мтаЕв: 150рх; 
Е1оаЁе: 1еЕЁ; 

} 

#г1таНЕРапе1 { 


тай: 150рх; 
Е]оаЁе: 1еЕЕ; 
} 
#Еоосег ( 


с1еаг: ЪБоЕН; 
} 


Рис. 8 + Тотже макет, но с плавающими элементами и хвостовиком 


Все абсолютно сочетаемо м. _ 


Но теперь левая и средняя колонки поменялись мес- 
тами! Поскольку плавающие элементы остаются в 
нормальном потоке документа, их порядок в исход- 
ной НТМГ-разметке гораздо важнее, чем при абсолют- 
ном позиционировании. Самый простой способ ре- 
шить эту проблему -— изменить порядок следования 
левой и средней колонок в НТМГ-коде. Есть и другие 
подходы, связанные с использованием отрицательных 
значений полей. Но в девяти случаях из десяти доста- 
точно поменять порядок элементов. 


СОВЕТ 


Дополнительные сведения о решении на основе отрицатель- 
ных полей см, на демонстрационной странице Райана Брил- 


ла (Куап ВпЦ) млмм.ай$Еарай.сот/ ат с(е5/педаНуетага!ие. 


Все абсолютно сочетаемо 


Как и многие другие, приступающие к изучению вер- 
стки на основе С$$5, Рэй Генри для своего макета стре- 
мя колонками выбрал абсолютное позиционирование. 
Во многих случаях и уж, конечно, для «Заднего дво- 
ра» это вполне здравое решение, поскольку методика 
эффективна и проста для понимания. 


Но не для всех сценариев это решение идеально, 
иногда возникают сложности. Если необходим хвос- 
товик или элементы на странице должны что-то 
знать о взаимном расположении, на помощь прихо- 
дят плавающие объекты. Само по себе ни одно ре- 
шение не идеально, но они неплохо дополняют друг 
друга. Пользуйтесь и тем и другим, в сочетании они 
способны реализовать все, что вы только можете себе 
вообразить. 


4 Зак. 1942 
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Энтомология 


Центрирование в современном веб-дизайне 


Интересно, откуда берутся идеи? В случае 
«Энтомологии» идею дизайна навеял музы- 
кальный клип -— сингл «Булавка», исполняе- 
мый УеаВ УеаЬ УеаВ. Джон Хикс хотел создать 
визуальное воплощение концепции сада, ко- 
торое тем не менее садом не являлось бы. 
Видеоряд в «Булавке» содержит изображения 
наколотых бабочек, которые идеально отве- 
чали замыслу Хикса. 


Нарисовав грубый эскиз макета, Хикс сразу 
перешел к 655, не создавая предварительно 
модельв АдоЬе РБо{озВор. Поскольку это был 
его личный проект, а у него хватало и другой 
работы, то он не стал тратить время на все 
шаги стандартной процедуры дизайна. Он 
рассказывает, что даже надел тропический 
шлем и положил рядом сачок, чтобы создать 
реалистичную обстановку! То, что получи- 
лось в результате, резко отличается от при- 
сущей Хиксу манеры. 


Ширина области 
контента остается 
неизменной 


отширины | 


окна 
браузера 


Рис. 1 + Верстка с фиксированной шириной 


Область контента 
растекается и заполняет 
все окно браузера 


Рис. 2 + Текучая верстка 


Фиксированная и текучая верстка 


Фиксированная 
и текучая верстка 


Макеты для У!еЬ традиционно принято относить. к 
одному из двух видов: фиксированныеи текучие. При 
фиксированной верстке задается конкретная птирина. 
Контент можно выровнять по левому краю, правому 
краю или центру, но он не должен выступать за пре- 
делы области указанной ширины. Примером может 
служить дизайн «Энтомологии» (рис. 1). 


Текучий, или динамический (Паша, Пи, дупатис), ди- 
зайн отличается тем, что игирина задается в процентах, 
аневабсолютных величинах, так что макет «растекает- 
ся», стремясь заполнить всю ширину окна (рис. 2). 


Возможны и комбинации этих подходов. Взять, к при- 
меру, трехколонный макет, в котором для боковых ко- 
лонок задана фиксированная ширина, а для средней — 
процентное отношение (или ширина не задана вовсе). 
В этом случае контент займет все доступное простран- 
ство, но средняя колонка будет сжиматься или расши- 
ряться при изменении размеров окна браузера или раз- 
решающей способности монитора. 


Как и во многих других случаях, пристрастия и мода 
постоянно меняются. В самом начале развития \\еЪ пред- 
почтение отдавалось фиксированной верстке. Но со вре- 
менем стали обсуждаться достоинства текучего дизай- 
на, а спустя несколько лет он стал очень популярен. 


В последние два года вновь растет популярность фик- 
сированной верстки, особенно среди дизайнеров, при- 
верженных стандартам. Когда мы работали над кни- 
гой, почти все ведущие специалисты в этой области 
применяли фиксированный дизайн как на собствен- 
ных сайтах, так и при работе на заказ. Это интересная 
тенденция — надо бы разобраться, почему фиксиро- 
ванная верстка может нравиться дизайнерам больше, 
чем текучая. 


Прежде всего, фиксированная верстка оставляет ди- 
зайнеру больше контроля над пространством, в кото- 
ром он может работать. Проще управлять длиной тек- 
стовых строк, а также взаимным расположением и 
близостью текста и изображений. Поэтому весьма ве- 
роятно, что фиксированная верстка вновь выйдет на 
первый план, А | 


ШУ Верстка 


У текучего дизайна тоже есть свои. преимущества. 
Если заполнено все окно браузера, то сама собой ре- 
птается проблема зрительного баланса, возникающая 
в случае, когда фиксированная, прижатая к левому 
краю верстка занимает лишь часть доступного про- 
странства. Но за это приходится платить потерей 
контроля над длиной строк, потоком и взаимным рас- 
положением элементов. Для опытных дизайнеров это 
серьезные проблемы, а вариантов их решения совсем 
немного. 


Чтобы одновременно иметь возможность контроля, 
как при фиксированной верстке, и решить проблему 
зрительного баланса, дизайнеры часто центрируют 
контент. Тогда свободное пространство равномерно 
распределяется по обе стороны занятой области, что 
позволяет избежать широкого пустого места справа. 


Способы центрирования 


Центрирование с помощью С55 оказывается не совсем 
тривиальным делом, так как узаконенный способ го- 
ризонтального размещения по центру работает нео- 
динаково в разных браузерах. Хикс столкнулся с этой 
проблемой, работая над «Энтомологией», и решил ее 
обходным путем. Но прежде чем знакомиться с его 
подходом, рассмотрим стандартные методы центри- 
рования макета с помощью таблиц стилей. 


Центрирование 
с помощью автоматически 
устанавливаемых полей 


Предпочтительный способ центрирования любого 
элемента по горизонтали — это использование свой- 
ства вагд1 п, значения 1еЕ6 и г1аВЕ которого зада- 
ются равными аибо. Чтобы этот способ сработал, не- 
обходимо создать объемлющий а1у. При этом 
обязательно должна быть задана его ширина. 
Ч1у#сопсалпег { 
мага1и-1еЕе: ацео; 
пага1п-каане: ацсо; 
итаен: 168рх; 
} 


Нарис. 3 приведен пример использования такой тех- 
ники для одной из бабочек в дизайне Хикса, Картинка 
помещена в отдельный Я1у и центрирована с помо- 
щью автоматических полей, 


Этот прием прекрасно работает почти во всех совре- 
менных браузерах, даже в М1сгозо Ииегпе! Ехр|огег 6 
для Ут 4о\$ при условии, что установлен режим 
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Рис. 3 + Центрирование элемента с помощью автоматических полей 


*. 


узеров, которую часто еще называют переключением ООСТУРЕ. 
В ХНТМ\-коде сайта 055 7еп багеп используется подходящий 
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‚совместимости — это часть технологии производства бра- | 


Способы центрирования 


совместимости. К сожалению, в более ранних версиях 
Пиегпе! Ехрогег для М/иалдом$. он не работает, поэто- 
му его применимость ограничена, 


В табл. 1 приведены сведения о поддержке этой тех- 
ники в разных браузерах. 


Таблица 1 + Поддержка автоматических полей в разных браузерах 


нра к кое и нь = оби 


Нет. 


Несмотря на неадекватную поддержку, многие дизай- 
неры пропагандируют использование именно этого 
приема всюду, где возможно, поскольку его можно 
считать стандартизованным методом горизонтально- 
го центрирования в С5$. 


Центрирование_ 
с помощью свойства 
{ех{-айоп 


Другой способ центрирования состоит в использова- 
нии свойства сехЕ-а11 от. Ему нужно присвоить зна- 
чение сепсег и применить к элементу Боау. Это, ко- 
нечно, отъявленное мошенничество, но оно работает 
во многих браузерах, так что трюк можно ВЗЯТЬ На вО- 
оружение; 

Мошенничеством мы назвали этот прием потому, что 
свойство текста применяется к объемлющему элемен- 
ту, а не к тексту. А это создает дополнительные слож- 
ности. | ях 


Создав а1\, необходимые для макета, вы применяете 
свойство сехЕ-а119п следующим образом: 
роау ( 
ЕехЕ-а119п: сепеег; 
} 


В чем же здесь проблема? А втом, что и все потомки 
Бо@у тоже будут центрироваться (рис. 4). 


А значит, придется писать дополнительные правила 
для корректировки и восстановления стандартного 
отображения текста: 


р | 
Сехе-а11а1: 1еЕс; 


} 


Как вы понимаете, это не слишком удобно. Кроме 
того, по-настоящему совместимые со стандартом бра- 
узеры не будут выравнивать контейнер, только текст. 


Сочетание задания полей 
с выравниванием текста 


Принимая во внимание проблемы с обратной совме- 
стимостью свойства сехЕ-а11ап и желая восполь- 
зоваться поддержкой автоматических полей в боль- 
шинстве современных браузеров, многие дизайнеры 
объединяют оба подхода, для того чтобы центриро- 
вание правильно работало во всех браузерах: 
Боау { 
ЕехЕ-а]19п: сепЕехг; 
} 
#сопЕазпег { 
щаеотп-ТеЕс: ааЕо; 
шаготи-гтане: аабо; 
Богаег: 1рх 5011а геа; 
засй: 168рх: 
кехс-а11а9п: 1еЕЕ; 
} 


Увы, такое решение тоже несовершенно и по-прежне- 
му остается трюком; Приходится писать дополнитель- 
ные правила для управления выравниванием текста. 
Но все же оно дает хорошие результаты для большин- 
ства браузеров. 


Решение на основе 
отрицательных полей 


Столкнувшись с проблемой центрирования в «Энто- 
мологии», Хикс решил применить еще один прием: 
задать отрицательные значения полей. 


Впрочем, для центрирования недостаточно просто 
задать отрицательные поля. Понадобится еще приме- 
нить абсолютное позиционирование, 
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Рис. 4 + Центрирование с помощью свойства сехЕ-а119п 
в [П{егпе{ Ехрогег. Обратите внимание, что текст абзаца внутри 
1 тоже центрирован 


ПРИМЕЧАНИЕ 


Важно подчеркнуть, что отрицательные значения полей в (55 
вполне законны. С их помощью можно решить целый ряд про- 
блем дизайна, например задачу о перекрытии прямоуголь- 
ников, содержащих некоторые элементы. 
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Рис. 5 + Абсолютное позиционирование объемлющего блока 
со смещением 50% от левого края 


Рис. 6 + Если для элемента задано отрицательное поле, равное 
половине его общей ширины, то элемент оказывается точно в центре 


ПРИМЕЧАНИЕ 


Будьте внимательны к арифметике! При вычислении ширины 
нужно учитывать отступы и границы, иначе нужный эффект 
не будет достигнут. 


Верность стилю 


Вот как это делается. Сначала создаем контейнер, аб- 
солютно позиционируем его и задаем отступ от левой 
границы - 50 процентов. В результате левое поле 
объемлющего блока будет начинаться в середине стра- 
ницы (рис. 5). 


Затем левому полю контейнера присваивается отри- 
цательное значение, равное половине ширины объем- 
лющего элемента. В итоге объемлющий блок распо- 
лагается точно по центру (рис. 6). 


Вот фрагменты из таблицы стилей «Энтомологии»: 


#фсопсазлех { 
Баскагоцпа: #ЕЁЕс ит1 (п1а.7ра) тереаЕ-у 


сепЕег; : у 
розте оп: а] 954 ое 0С4 е; 


И К. 
а\= ЕЕ: 507 Я 
узасв: 76 Орх; 
_ магап-1еЕе: -380рх; — 


Ловкость рук и никакого мошенства! Хотя этот метод 
нельзя назвать предпочтительным, но в качестве об- 
ходного пути он годится и поддержан очень широко. 
Вы не поверите, но даже Ме5саре 4.х поддерживает эту 
технику, поэтому она оказывается исключительно 
полезной, если дизайн должен работать с максималь- 
но большим числом разных браузеров. 


Верность стилю 


Мода приходит и уходит, а дизайн с фиксированной 
версткой останется еще надолго. Он дает возможность 
очень точно определить макет страницы и потому 
находится в арсенале любого дизайнера. 


Какой подход предпочесть, зависит от личных при- 
страстий и того, на какие браузеры вы ориентируетесь. 
Использование для центрирования комбинации отри- 
цательных полей и абсолютного позиционирования 
(как в «Энтомологии») — это прием, согласующийся 
со спецификацией и работающий в самых разных бра- 
узерах, в том числе и тех, от которых трудно ожидать 
поддержки. 
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Белая лилия 


Принципы и процедуры эффективной верстки 


Несмотря на отсутствие каких-либо визуаль- 
ных ограничений для работ, присылаемых на 
сайт Геп Саг4еп, Иенс Кристенсен решил, что 
внимание должно быть привлечено к четы- 
рем ключевым словам: визуальный, С55, Геп 
и Сагаеи. Это и задает общий настрой его ра- 
боты: расслабляющий, успокаивающий, с до- 
минирующей ботанической темой. 


Определившись с темой, он перешел к изу- 
чению контента и подготовке эскизов, отве- 
чающих поставленной цели. В результате 
«Белая лилия» стала практическим полезным 
примером верстки и образцом для многих и 
многих сайтов. 


ПРИМЕЧАНИЕ 


Знакомые с другими видами графических искусств, напри-_ 


мер, с дизайном печатных изданий или упаковки, очень ско- 
ро приходят к выводу, что у макета, предназначенного для 
отображения на экране, имеется ряд уникальных особенно- 
стей. Начинающие заниматься веб-дизайном быстро осозна- 
ют, что, хотя у верстки для \еБ есть ряд общих чертс макети- 
рованием печатной страницы, тем не менее это совершенно 
разные вещи. 


Семь раз отмерь, один раз отрежь 


Принципы верстки 
для \\еБ 


Мы часто, не задумываясь, употребляем слово верст- 
ка или макет, понимая под ним просто число коло- 
нок на странице. Люди, изучающие С$5, часто имен- 
но так и подходят к верстке, задавая вопрос: «Как 
создать макет с тремя колонками?» или «Как создать 
макет с заголовком и хвостовиком?». Это правильные 
и важные вопросы, но еще до того, как приступать к 
С$$, надо ясно представлять себе принципы, следуя 
которым мы выбираем тот или иной макет. 


Принципы эффективной верстки веб-страниц корня- 
ми уходят во времена, когда никакой Всемирной пау- 
тины не было и в помине. И хотя для УУеЬ эти прин- 
ципы претерпели изменения, но они остаются основой 
для создания макетов, которые нетолько приятны гла- 
зу, но и хорошо функционируют. 


Во всех видах графического искусства макетирование 
служит одной главной цели: эффективно организовать 
контент, Зрительное представление макета зависит от 
носителя, природы контента и аудитории. Вторичная 
задача, встающая именно перед веб-дизайнером, проис- 
текает из того факта, что макет должен еще и поддержи- 
вать определенные функции. Речь идет о ссылках, сис- 
темах меню и других функциональных элементах, 
которые должны ‘быть интегрированы в дизайн. И на- 
конец, макет — это краеугольный камень единства сайта, 
без которого им трудно будет пользоваться. 


Семь раз отмерь, 
один раз отрежь 


Создавая «Белую лилию», Кристенсен для начала по- 
пытался организовать контент, с которым ему пред- 
стояло работать. 


Организация контента преследует несколько целей. 
У вас складывается четкое представление о природе 
материала, а следовательно, и о сравнительной важ- 
ности тех или иных фрагментов. Далее вы начинаете 
размышлять о макете и различных подходах, кото- 
рые помогли бы добиться нужной формы и функ- 
циональности. 


Первым делом Кристенсен выделил три категории 
контента на сайте С$$ Иеп Саг4еп: 


+ общая информация, к примеру, ссылки на разные 
шаблоны, инструменты проверки и обзорную ин- 
формацию о сайте; 


4+ ссылки для навигации по самому сайту 7еп Саг4еп: 
+ основной контент. 


Располагая этой информацией, он приступил к рабо- 
те над версткой страницы. Теперь у него было две 
вполне конкретных цели: реализовать свою тему и 
представить контент, принадлежащий трем разным 
категориям. Для выработки окончательного решения 
потребовалось несколько итераций (рис. 1). 


В конце концов внешний облик «Белой лилии» про- 
яснился. Важно, чтобы при выборе макета вы осно- 
вывались на природе контента и визуальных требова- 
ниях, а не принимали решение наугад или следуя 
текущей моде. 


Решения, принятые при 
создании макета 
«Белой лилии» 


Имея четкое представление о том, что надо делать, Кри- 
стенсен должен был решить, как подойти к визуально- 
му представлению темы и контента. 


Автор решил, что фотография лилии задаст нужный 
ему настрой на ботаническую тему. Фотография так- 
же определила цветовую гамму. Кроме того, он раз- 
работал дополнительный декор, подчеркивающий 
растительные мотивы (рис. 2). 


Но по-настоящему работа Кристенсена заиграла, ког- 
да дело дошло до контента. Поскольку цель была чет- 
ко поставлена, то не возникло сложностей с определе- 
нием относительной важности контента и выбором 
эффективного представления. 


Поместив общую информацию о саде в заголовок, 
Кристенсен достиг двух важных целей: представить 
«логотип» (в данном случае цветы и название страни- 
цы С55 Деп Сагаеп) и рассказать о причинах появле- 
ния данной страницы, Кроме того, в этот же раздел 
помещены ссылки на примеры НТМЕ и С$5-файлов, 
а равно на инструменты проверки (рис. 3). 
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Рис. 1 + Альтернативный дизайн «Белой лилии» 


Рис. 2 + Три стилизованных цветка, подчеркивающих 
ботаническую тему «Белой лилии» 


Рис. 3 + Решение одной из важнейших задач: эффективное группирование взаимосвязанного контента 


Рис. 4 + Метафора - это важный аспект проектирования 
интерфейса. Изображение магазинной тележки, такой, 
например, как на сайте ата?оп.сот, — это общепринятый 
символ, адаптированный к нуждам электронной коммерции 
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Рис. 5 + Навигационные ссылки в дизайне «Белая лилия» 


Оставшееся место освободилось для навигации ‘и ос- 
новного. контента. Элементы навигации Кристенсен 
поместил в левую колонку, поскольку именно там по- 
сетитель ожидает их найти. Правая же колонка исполь- 
зуется для контента. Оба раздела умеренно стилизо- 
ваны и не загромождены излишними украшениями. 
Сочетание заголовка и двухколонной верстки прекрас- 
но удовлетворяет поставленным требованиям, полу- 
чившийся несложный дизайн работает. 


Рекомендации по верстке 


Сформулировав общие цели, вы можете воспользовать- 
ся нижеследующими рекомендациями для детальной 
верстки. Мы приведем некоторые общие принципы, 
применимые для любых макетов веб-страниц, В основе 
их лежит удобство веб-интерфейса и практичность. 


Проектирование интерфейса 
пользователя 


В отличие от печатных изданий, веб-страница пред- 
полагает интерактивное взаимодействие, а не просто 
пассивное созерцание, Дизайн интерфейса пользова- 
теля — это относительно неплохо разработанная об- 
ласть, поскольку интерактивные интерфейсы приме- 
няются в самых разных компьютерных технологиях, 
от операционных систем до прикладных программ. 


Вот некоторые фундаментальные принципы проекти- 
рования пользовательского интерфейса: 


$ решите, на какую категорию пользователей будет 
ориентирован интерфейс; 


4+ стремитесь к тому, чтобы пользователь не заблу- 
дился на странице и на сайте в целом; 


+ используйтезнакомые метафоры. Прекрасным при- 
мером может служить символ магазинной тележки 
насайте электронной коммерции, Даже незнакомые 
с \еЬ люди сразу понимают его смысл (рис. 4); 


+ старайтесь, чтобы фунциональные особенности 
были ясно видны. В «Белой лилии» это списки ссы- 
лок, назначение которых очевидно с первого взгля- 
да (рис. 5); 


4+ будьте последовательны ввыборе элементов дизай- 
на. Если бы «Белая лилия» была взята в качестве шаб- 
лона для полноценного сайта, то элементы навига- 
ции следовало бы расположить одинаково на всех 
страницах, равно как фотографию и логотип. Из- 
менение местоположения эмблемы сайта и функ- 
циональных элементов может запутать пользовате- 
ля, избегайте таких решений; 


{:] Верстка 


+ следитеза центром внимания. В дизайне всегда дол- 
жен быть какой-то объект, притягивающий вгзляд. 
«Белой лилии» это сам цветок. Выявив центральный 
объект, дизайнер может затем: расположить осталь- 
ные элементы для достижения зрительного баланса; 


4+ не оставляйте сомнений в том, чему же посвящена 
страница. Люди не могут долго сохранять сосредо- 
точение; обычно они согласны ждать не более 9 се- 
кунд — если за это время человек не поймет, в чем 
дело, то, скорее всего, переключится на что-то дру- 
гое. Кристенсен добивается внимания посетителя 
за счет размещения основного контента в отдель- 
ной области на странице (рис. 6.). 


Дизайнеры интерфейсов всегда озабочены соотноше- 
нием эстетики и функциональности. Обратите вни- 
мание на стрелочки в заголовках разделов списка ссы- 
лок в «Белой лилии». Все они одинакового размера, 
имеют приятный внешний вид и помогают посетите- 
лю сориентироваться (рис. 7). 


Практичность 


Хотя концептуально практичность и дизайн пользо- 
вательского интерфейса связаны между собой (и их 
исторические корни одинаковы), но цели их несколь- 
ко различаются. Пользовательский интерфейс есте- 
ственным образом касается пользователей, поэтому 
главная задача инженеров и разработчиков — понять, 
как лучше удовлетворить их потребности. 


При изучении практичности упор’ делается на том, ка- 
ким образом пользователь работает с предложенным ин- 
терфейсом. Оба вопроса тесно связаны друг с другом, 
поскольку результаты исследования практичности вли- 
яют на методы проектирования интерфейсов, а разра- 
ботанные интерфейсы предлагаются пользователям 
для тестирования с целью последующего улучшения. 


Как и проектирование пользовательских интерфейсов, 
изучение практичности - кстати, тоже пришедшее из 
других компьютерных технологий - ведется уже дав- 
но. Практичность в \М!еь — эта лишь часть более ши- 
рокой проблематики, но для нее выработаны специ- 
фические рекомендации. 


Вот некоторые предложения по вопросам верстки, 
имеющим отношение к практичности: 


+ Информация должна быть «на холме». Конечно, в 
применении к УУеЬ «холм» - это лишь метафора, 
но смысл ее ясен: та информация, которая нужна 
пользователю в первую очередь, должна распола- 
гаться как можно ближе к началу страницы. В «Бе- 
лой лилии» логотип сайта и заголовок страницы 
сразу бросаются в глаза (рис. 8). 
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Рис. 6 + Если вы поместите главный элемент в отдельную 
область, посетитель сможет быстро понять назначение страницы 


сеес{ а Оезюп 


Рис. 7 4 Стрелки в заголовках разделов списка ссылок эстетичны 
и вместе с тем функциональны, поскольку привлекают внимание 
посетителя к расположенному ниже контенту 


ПРИМЕЧАНИЕ 


Проектированию пользовательского интерфейса и инте- | 
рактивному взаимодействию посвящен замечательный сайт 
Вохе5 апЧ Агтом$ (ммм, Бохезапдаггом. сот). 


Рис, 8 + Заголовок, содержащий важную информацию 
о странице, находится в самом верху 
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Рис. 9 + Описание в заголовке окна хотя и не является частью 
верстки, но помогает посетителю ориентироваться на сайте 
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Рис. 10 + Информация об авторском праве или лицензионной 
политике — это важный элемент контента, который обязательно 
должен быть предусмотрен в верстке 


ПРИМЕЧАНИЕ - 


Во многих макетах информация об авторских правах, обес- 
печении конфиденциальности, лицензии ит,п. размещается 
в хвостовике. Этого общепринятого соглашения следует при- 
держиваться при проектировании сайтов, для которых тако- 
го рода информация — существенная сторона деятельности 
организации или компании. 


Г = 


{Я баесе а Оезюп 


Рис. 11 + Если бы в этом дизайне присутствовало поле для 
ввода поискового запроса, то находиться оно могло бы над 
ссылками в области навигации 
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Рис. 12 + Интересно, что отступы при размещении текста в 
колонке помогают лучше понять функциональность. В данном 
случае отступы применяются в главном списке ссылок, 
визуально разбивая колонку на разделы, из-за чего весь макет 
становится более свободным 


+ Всегда размещайте описание в элементе Е1Е1]е: 


<с1Е1е>с85 йеп Саг@аеп: ТНе Веаобсу оЁ СКе С55 


резтап</Е1Е1е> 


Эта строка помещает указанную строку в заголо- 
вок окна браузера, что помогает пользователю по- 
нять, о чем идет речь на странице (рис. 9). 


+ Следите за тем, чтобы ссылки и система навигации 
размещались по возможности в одних и тех же ме- 
стах. Кроме того, включайте ссылку на начальную 
страницу. Полезны также ссылки на страницы с 
описанием авторских прав, политики обеспечения 
конфиденциальности и контактной информации. 
В случае сайта С5$ Геп Саг4еп все варианты дизай- 
на защищены лицензией Сгеапуе Соттоп$, что 
четко обозначено в тексте (рис. 10). 


+_ Для большинства средних и больших сайтов насто- 
ятельно рекомендуется реализовать систему поис- 
ка. Понятно, что 055 Геп Сат4еп — это демонстра- 
ция подходов к дизайну, а не методов построения 
сайтов, но на практике пользователи ценят возмож- 
ность поиска и часто ею пользуются. Если, конеч- 
но, она расположена в интуитивно понятном мес- 
те. Как правило, поле для ввода поискового запроса 
находится там, где ему логически надлежит быть, 
например, рядом с элементами навигации. Если бы 
в «Белой лилии» была предусмотрена возможность 
поиска, то поместить ее следовало бы, наверное, над 
списком ссылок (рис. 11). 


+ Разбивайте содержимое колонок с помощью отсту- 
пов, Это способствует улучшению внешнего обли- 
ка страницы и помогает пользователю уяснить ее 


структуру (рис. 12). 


Конечно, о практичности можно говорить еще долго, 
но следование даже этим рекомендациям позволит 
выделить важные детали, касающиеся формы и функ- 
ции, и в конечном счете сделать работу со сверстан- 
ной вами страницей более удобной для пользователя. 


Следуйте процедуре 


Дизайн «Белая лилия» демонстрирует, как следование 
четко определенной процедуре приводит к решению 
многих вопросов верстки. Конечно, различные дизай- 
неры и коллективы строят процесс работы по-разно- 
му, и возможно, ваш подход существенно отличается, 


Но какой бы ни была конкретная процедура, ясно, 
что, определив сначала тему и затем проанализиро- 
вав контент, Кристенсен нашел очень короткий путь 
к цели: создать дизайн, приятный и удобный для 
пользователя. 


Дизайнер Минц Мейер (М1п2 Меуег) Начинающие дизайнеры чаще всего задают 

ими. с552епдаг4еп.сот/037 вопрос: «Откуда черпать идеи» Им совету- 

ют разное. К примеру, в природе есть немало 

необычных ландшафтов, способных стать 
Г у источником вдохновения и свежих идей. 

„= 

ОТ Ц Г 0 ОТС Другой источник вдохновения человек. Фор- 

ма человеческого тела всегда занимала особое 

Горизонтальные линии в вертикальном мире место в искусстве: студенты тратят немало вре- 

мени в студиях, изучая рельеф тела, черты 

лица и другие особенности человека. В дизай- 

не «Прет-а-порте» Минца Мейера природа и 

человек создают уникальное сочетание, впе- 


чатление от которого усиливается необычной 
версткой. 
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| Печатная страница я 


Печатная страница 
как источник вдоховения 


Веб-дизайнеры, уже проработавшие в этой области 
некоторое время, часто слышат от маститых авторов 
и преподавателей одно и тоже: «УУеь — нето же самое, 
что печатное издание». Конечно, это так, но дизайн 
«Прет-а-порте» убеждает нас втом, что, хоть веб-стра- 
ница и печатная страница — вещи разные, но нет при- 
чин, по которым дизайн последней не мог бы стать 
источником вдохновения для веб-дизайнера. 


В данном случае идеей «Прет-а-порте» стала не про- 
сто печатная страница, а страница, посвященная пе- 
чати (рис. 1). | | 


В оригинальной брошюре Мейера, созданной как рек- 
лама типографии, для создания визуального напря- 
жения применялось сочетание графических образов 
и слов. Левая часть была отведена под вертикальный 
ряд фотографий - стилизованных для данной брошю- 
ры и снятых в один день — женского лица необычной 
расцветки. Справа помещены изображения со слова- 
ми и фразами, в частности, с немецким словом, пере- 
водящимся как «обесцвеченный». В результате бро- 
шюра подчеркивает качество работы типографии с 
помощью ярких образов и ясной терминологии, под- 
водя читателя к выводу, что эта типография не допу- 
стит ошибок при выборе цветов для печатных изоб- 
ражений. 


Оригинальная брошюра была сверстана в формате 
«ландшафт», то есть по горизонтали, а не по вертика- 
ли. Именно в этом заключается самый интригующий 
И интересный аспект макета соответствующей веб- 
страницы. 


В нарушение всех правил 


Хотя ландшафтный формат эффектно выглядит в 
печатных изданиях и потому применяется очень час- 
то, но веб-дизайнерам до последнего времени реко- 
мендовали избегать такой верстки. Причины связаны 
главным образом с практичностью. В случае горизон- 
тальной верстки браузер помещает полосу прокрут- 
Рис. 1 + Фрагмент печатной брошюры, из которой родилась ки вдоль нижнего края документа. Это считалось не- 
идея «Прет-а-порте» удобным, поскольку пользователи обычно не любят 
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совершать движений больше, чем это необходимо для 
получения информации. А для людей с некоторыми 
физическими недостатками прокручивать окно ‘по 
горизонтали особенно трудно. Поэтому веб-дизайне- 
ры, как правило, прибегали к горизонтальной верстке 
лишь в особых случаях, скажем, в целях эксперимен- 
та или, что особенно печально, создавали такого рода 
дизайн по ошибке, неправильно оценив разрешаю- 
щую способность экрана. 


Редким исключением стал запущенный в 1998 году 
сайт Сие оЁ Ейепа$ (В кругу друзей), посвящен- 
ный людям, страдающим от болезней позвоночни- 
ка. Эта организация, основанная в числе прочих 
ныне покойным Кристофером Ривом (СВизорВег 
Кееуе), выбрала такой дизайн, потому что именно из 
горизонтального положения люди с больным позво- 
ночником вынуждены смотреть на мир, В то время 
подобная дизайнерская концепция была революци- 
онной, но отражала конкретный человеческий опыт 
(рис, 2). 


Заинтересовавигись тем, как горизонтальное располо- 
жение материала может повлиять на \/еЬ, Мейер ре- 
шил попробовать создать убедительную версию пе- 
чатной страницы - не только работоспособную, но и 
сверстанную с применением С5$$. 


Горизонталь 
бросает вызов 


Попытка объединить глубокое эмоциональное воз- 
действие оригинальной брошюры с версткой на ос- 
нове С55 натолкнулась на проблему поддержки со сто- 
роны браузеров. Чтобы дизайн выглядел эстетично и 
был удобен для работы в разных браузерах, приходи- 
лось искать различные обходные пути. 


Рис. 2 4+ Сайта Сгс!е о? Рпепд$, запущенного в 1998 году, уже нет, 
но это один из ранних примеров нарушения запрета на горизонтальную верстку 


| | Горизонталь бросает вызов 


Фиксированное 
позиционирование 


Яркий образ женщины побудил Мейера разместить 
картинку так, чтобы она всегда была видна на экране, 
а текст прокручивался под ней. Этот эффект возмо- 
жен только в \/еБ. 


(55 предоставляет дизайнеру много возможностей для 
реализации фоновой графики, но если сделать фото- 
графию женщины фоновой картинкой в элементе 
Бойу, то текст будет прокручиваться поверх нее. При 
этом и текст будет невозможно читать, и воздействие 
образа сведется на нет. 


Один из способов решить эту проблему — присоеди- 
нить изображение к Я1у с фиксированной позицией. 
Элемент с фиксированной позицией будет всегда оста- 
ваться в одном и том же месте на странице, он не про- 
кручивается, что бы ни происходило с остальными эле- 
ментами. Для этой цели подошел бы такой селектор: 
ЯЧ1у#зсас1с-маде { 
Баскагочпа-1таде: иг] (Ъа_Еасе.3)рд); 
Баскдгоцпа-гереас: по-гереас; 
Баскагочиа-роз1е1оп: 1еЕс Босеом; 
роз1Е1оп: Елхеа; 
1еЁёеЕ: 0; 
Богом: 0; 
ВезаНе: 594рх; 
итЧЕй: 205рх; 
&-1паех: 2; 


СОВЕТ 


Свойство 2-1паех позволяет задать порядок перекрытия 
элементов. Элемент с наибольшим значением =-1паех ока- 
| жется поверх всех остальных. } 


Если браузер полностью совместим со спецификацией 
С5$$, то значение Е1хеа свойства ро51Е1оп гаранти- 
рует, что этот аз будет жестко закреплен на странице, 
а прочие элементы можно будет расположить за ним 
(рис. 3). 


Рис. 3 + В браузере Мо2Иа, который поддерживает 
фиксированное позиционирование, изображение остается на 
одном месте, перекрывая прокручиваемый контент 
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Ошибки в браузерах 


Как это часто бывает, когда приходится учитывать 
дефекты браузеров, разумно сначала создать идеал, а 
затем заняться браузерами, которые по той или иной 
причине не поддерживают нужного эффекта. Для это- 
го создаются разные варианты дизайна, а затем с по- 
мощью ]Лауа5сптр\-сценария определяется, с каким бра- 
узером мы имеем дело, Впрочем, некоторые считают 
такой подход неэффективным, в частности потому, 
что многие пользователи отключают поддержку 
]ауазсири! в своих браузерах. 


В случае «Прет-а-порте» курс был взят на то, чтобы 
создать альтернативный дизайн для Пщегпе{ Ехр]огег, 
который бы хорошо выглядел и прорисовывался, 
пусть даже изображение лица прокручивалось бы за 
пределы окна. 


цегпе( Ехр]огег не поддерживает также селекторов до- 
черних элементов. Синтаксически такие селекторы за- 
даются с помощью символа >. Так, селектор р>эзЕгопа 
означает, что следующее за ним объявление должно 
быть применено только к элементам зсгопа внутри 
абзацев. 


В связи с отсутствием поддержки фиксированного по- 
зиционирования и селекторов дочерних элементов в 
Пцегпе! Ехр]огег, были написаны правила, которые ре- 
ализуют оптимальный дизайн для браузеров, совмес- 
тимых со спецификацией С5$, и альтернативный ди- 
зайн для Нцегие! Ехр|огег. 

Боау#сзв-геп-дагаеп>а1у#ехега 12 { 

Баскагоцпа-1таае; иг1 (Ба_Еасе.)ра); 

Баскагоцпа-гереае: по-гереае; 

Баскогоипа-ров1 101: 1еЕЕ БоЕбом; 

ров1Е1оп;: Е1хеа; 

Т1её Е: 0; 

БосЕот: 0; 

Незане: 594рх; 

утаЕН: 205рх; 

2-1паех: 2; 


} 


Следующее правило применяется только в браузерах, 
не понимающих предыдущего, в данном случае в 
(цегпе{ Ехр|огег. Поскольку специфичность селекто- 
ров дочерних элементов больше, то у предыдущего 
правила более высокий приоритет, но лишь втом слу- 
чае, если браузер его понимает. 


ИВТ] верстка | тен 


ПРИМЕЧАНИЕ 


Хотя значение Е1хеа для свойства роз1 Е 1оп было введе- 
но в спецификации ($52 еще в 1998 году, но некоторые бра- 
узеры, прежде всего Мусто5ой ТпёегпеЕ Ехр(отет, его до сих 
пор не поддерживают. Поэтому, хотя созданная таблица сти- 
лей прекрасно работает в более совместимых браузерах, в 
[пёегпе{ Ехр(огег страница прокручивается целиком, что сво- 
Дит на нет весь задуманный эффект. 
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Рис. 4 4 В альтернативном варианте дизайна для |пегпе! 
Ехр!огег 6.0 картинка прокручивается за пределы окна, 
но целостность дизайна все же сохраняется 
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Рис. 5 + Так выглядит «Прет-а-порте» в браузере Орега 7.0. 

В версиях Орега младше 7.5 не появлялась полоса 
горизонтальной прокрутки, из-за чего большая часть страницы 
была недоступна 


А1увехЕегар1\у2 { 

БасКагочиа-1паде: иг] (ра_Расе_1е.7ра); 
БаскКагониа-гереаЕ: по-гереаЕ; 
БаскКагоциа-роз1Е1оп: 1еЕё Боевом; 
ро81Е1оп: абзо1щее; 
ТтеЕе: 0: 
БосЕкот: 0; 
НелоНеЕ: 600рх; 
итаеи: 265рх; 
} 


И хотя картинка с фиксированным позиционирова- 
нием в Ицеглее Ехрогег 6.0 уходит за пределы окна, 
дизайн все-таки остается эстетичным и приемлемым 
(рис. 4). 


Особенность браузера Орега 


При создании «Прет-а-порте» пришлось также решать 
проблему отсутствия надлежащей поддержки в брау- 
зере Орега, разработанном компанией Орега бо маге. 
Даже тогда, когда разработчики привержены стандар- 
там, как в случае Орега, по разным причинам реали- 
зация не всегда оказывается идеальной. 


В версиях Орега младше 7.5`не появляется полоса го- 
ризонтальной прокрутки. Разумеется, в этом случае 
дизайн оказывается абсолютно непригодным для ра- 
боты (рис. 5). 


К счастью, авторы Орега решили эту проблему, и те- 
перь дизайн не просто работает, но и поддерживает 
фиксированное позиционирование, как и другие С$$- 
совместимые браузеры. 


Чему мы научились 


Разные дизайнеры черпают вдохновение из разных 
источников, и реализация возникшей идеи приводит 
к разным результатам. Исследование горизонтальной 
верстки, предпринятое Мейером в связи с разработан- 
ным им дизайном печатной брошюры, выявило ряд 
новых возможностей и проблем. Применив тонкие 
обходные пути, Мейер сумел создать удивительно кра- 
сивый дизайн, который не только подсказывает, где 
искать плодотворные идеи, но и демонстрирует их эф- 
фективиую реализацию. 
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Дизайнер Седрик Саварезе (Седпс 5ауагезе) 
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| Монах 


Выразительное позиционирование и сетки 


Кто сказал, что сначала нужно составить 
план? Дизайнер Седрик Саварезе работал над 
своим «Монахом», экспериментируя в Адофе 
РВогозВор и наблюдая, что получается. Дос- 
тоинством такого подхода является гибкость: 
когда в голову приходит новая мысль, старые 
можно отбросить или приспособить к ново- 
му варианту верстки. 

Саварезе рентил, что внимание нужно при- 
влечь в первую очередь к заголовку, а осталь- 
ной макет выстроить вокруг него. Перепро- 
бовав множество шрифтов, он выбрал для 
заголовка и подзаголовка те, которые в наи- 
большей степени соответствовали идее ди- 
зайна. Тема дзен-буддизма была дополнена 
садовыми мотивами, а для визуальной при- 
влекательности использована спокойная 
красно-серая цветовая гамма. 


Позиционирование 


Позиционирование 
как выразительное 
средство 


Доминирующее изображение монаха занимает место, 
на которое зритель обращает внимание в первую оче- 
редь, — левый верхний угол. Самый первый элемент 
дизайна — одновременно самый идейно важный и за- 
нимает наиболее значимое место. 


Рис. 1 + Левый верхний квадрант 


Если взять плоский «холст» фиксированного разме- 
ра, например лист бумаги, и расчертить его пополам 
по вертикали и по горизонтали, то получится четыре 
квадранта. В западных языках текст читается слева 
направо и сверху вниз. Поэтому типичный зритель 
бессознательно приписывает разным квадрантам раз- 
ные приоритеты, 


Ри П НИ т 
с. 2 + Правый верхний квадран Вы никогда не задумывались, почему логотипы сай- 


тов обычно находятся в левом верхнем углу? Да пото- 
му, что именно туда прежде всего устремляется взор 
посетителя. Поместив какой-либо элемент в левый 
верхний угол, мы привлечем к нему максимум вни- 
мания, поэтому для торговых марок — это самое под- 
ходящее место (рис. 1). 


Правый верхний квадрант тоже важен (рис. 2). На веб- 
странице выделяется пространство, расположенное 
«на холме», то есть видимое без прокрутки. Именно 
Рис. 3 + Левый нижний и правый нижний квадранты ему придается наибольшее значение. Элемент, нахо- 
дящийся в правом верхнем углу, чуть менее важен, чем 
тот, что занимает левый верхний угол, но все же зна- 
чим для страницы в целом. 


Два нижних квадранта неслишком существенны для 
большинства веб-страниц (рис. 3). Некоторые дизай- 
неры помещают сюда дополнительную навигацию, 
другие — лишь информацию об авторских правах и 
больше ничего. В традиционном дизайне печатных 
изданий размещение элемента внизу страницы мо- 
жет создать впечатление, будто расположенные выше 
элементы приподняты. Такое ощущение трехмерно- 
сти характерно только для печатных страниц, ав МеБ 
на информацию, находящуюся внизу, просто не об- 
ращают внимания. 


Верстка 


Все шире распространяется интересная практика раз- 
мещения малозначимой информации вдоль нижнего 
края страницы. Здесь могут оказатьсяссылки навнут- 
ренний контент или на функции сайта, не нашедшие 
места среди механизмов регулярной навигации. Если 
посетитель не заметит их, ничего страшного, он смо- 
жет добраться до нужного контента другими способа- 
ми. Нуа те, кто обратят внимание на такие ссылки, 
получат возможность воспользоваться дополнитель- 
ными функциями. 


Сетка 


Сетка - это важный инструмент верстки, но из-за «не- 
гибкости» ею часто пренебрегают. Как и в математике, 
сеточный макет — это просто набор прямоугольников, 
на которые окно разбивается перпендикулярными пря- 
мыми. Именно в эти прямоугольники и помещаются 
позже элементы дизайна. Если строго следовать сетке, 
то пропорции и промежутки получатся более выверен- 
ными, правда, ценой чрезмерной упорядоченности и 
сухости (рис. 4). 


Классический табличный дизайн ярко демонстрирует 
ограничения, налагаемые излишне структурирован- 
ной сеткой, — у элемента, помещенного в ячейку таб- 
лицы, нет другого выхода, как только оставаться в этой 
ячейке. Если необходим эффект перекрытия, то нуж- 
но задействовать соседние клетки. Часто единствен- 
ный способ как-то нарушить регулярность состоит в 
разбиении изображения на мелкие кусочки, которые 
затем собираются путем создания сложных вложен- 
ных таблиц. 


С другой стороны, С$$ позволяет гораздо точнее кон- 
тролировать расположение элементов, не прибегая к 
помощи сеток. В основе макета может лежать сеточ- 
ная структура, но размещение отдельных элементов с 
нарушением регулярности осуществляется гораздо 
более гибко. Модель позиционирования, принятая в 
С$$, обеспечивает элементам куда большую свободу. 
Элементы могут располагаться за пределами своих кон- 
тейнеров, да и вообще в любом месте страницы. 


Построение сетки 


Конечно, чтобы выйти за пределы сетки, ее надо сна- 
чала построить. Если наложить сетку на «Монаха», то 
окажется, что заголовок разбит на три компонента, а 
основная область занимает две колонки. 
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Рис. 4 + Различные варианты организации макета на основе сетки 
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Рис. 5 + Силуэт монаха и заголовок объединены в одну картинку 


Рис. 6 + Кажущаяся вторая колонка выровнена по сетке 


Выход за пределы сетки 


Заголовок 


Заголовок состоит из трех областей, важность кото- 
рых неодинакова: силуэта монаха, текста еп Саг4еп 
и текста из раздела #рхеащЬ1е, который вынесен в 
заголовок из нормального потока документа. 


Но при взгляде на отдельные картинки, составляю- 
щие заголовок «Монаха», создается впечатление, что 
силуэт и текст объединены в одно изображение. Хотя 
насамом деле это разные структурные части заголов- 
ка, при кодировании они рассматриваются как еди- 
ное целое. Это вообще типично для веб-дизайна -— 
перед сохранением изображения надо объединить в 
одну картинку, чтобы потом было проще кодировать 
(рис. 5). 


Область контента 


Хотя в основе дизайна «Монах» лежит одна цент- 
ральная колонка с текстом, но заголовки, помещен- 
ные на полях, создают ощущение, будто есть вторая 
колонка. Мы раскрасили дизайн в синий цвет, чтобы 
были наглядно видны пропорции обеих колонок 
(рис. 6). 


Ширина левой колонки составляет примерно 2/3 ши- 
рины правой, то есть соблюдается соотношение 2:3. 
Пропорции устанавливаются автоматически: коль ско- 
ро ширина первой колонки задана, вторая занимает 
все оставшееся место. А отношение 2:3 - это класси- 
ческое гармоничное отношение, которое определяет 
естественный и приятный ритм страницы. 


Подробнее о пропорциях и отношениях см. книгу 
Кипбепеу ЕЙата «Сеоте!гу о! Оеяепт: За ез; ш Ргорогоп 
апа Сотаро$Июп» (Рипсеюп Атсбкесшга| Ргезз, 2001). 


Выход за пределы сетки 


Саварезе выстроил основную часть макета «Монаха» 
на базе сетки, но некоторые элементы расположил вне 
ее ячеек, чтобы нарушить регулярность и сделать ма- 
кет более интересным, 


Гибкости имеющейся в С$5 модели позиционирова- 
ния для этого достаточно, причем можно воспользо- 
ваться как абсолютным, так и относительным пози- 
ционированием. Анализ различий между ними 
позволит принять решение, какой вариант лучше при- 
менить. 


Ш! Верстка 


Абсолютное 
позиционирование 


Чтобы разобраться с абсолютным позиционирова- 
нии, надо понимать, что такое поток документа. Мы 
уже писали, что язык НТМЁ по природе своей ли- 
неен: сначала может идти элемент 11, за ним р, по- 
том а1у. Элементы могут быть вложенными, но 
если не применяются никакие стили, то НТМГ-до- 
кумент прорисовывается последовательно с начала 
и до конца (рис. 7). 


Абсолютное позиционирование позволяет не только 
переместить элемент в любое место на странице, но и 
изъятьего изнормального потока документа. Абсолют- 
но позиционированный блок не влияет ни на какие 
другие элементы, как будто его никогда и не было в 
потоке (рис. 8). Визуальноон окажется втом месте, куда 
его поместили, но сточки зрения других элементов его 
просто не существует. Решать вопросы, связанные с 
возможным перекрытием, — задача дизайнера. 


Единственный случай, когда абсолютно позициониро- 
ванный блок как-то влияет на другой элемент, —этоесли 
последний является потомком первого и также пози- 
ционирован. Согласно модели позиционирования, 
любой элемент позиционируется относительно своего 
контейнера. В большинстве случаев контейнером слу- 
жит корневой элемент документа Вт. Однако если у 
рассматриваемого элемента есть позиционированный 
предок, отличный от корневого элемента, то позицио- 
нирование производится относительно него, 


Подробнее о контейнерах см, спецификацию С$$ на стра- 
нице «10 У15 па Гоггла пе плоде! ЧеаЦ5» (гиг м. от ТВ/ 
КЕС-С$$2/у5иде! та сотианиае-Боск-е(а|$). 
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Рис. 7 + Нестилизованная разметка прорисовывается 
линейно сверху вниз 
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Рис. 8 + Оставшиеся в потоке элементы прорисовываются так, 
будто абсолютно позиционированного блока не существует 
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Рис. 9 + Элемент в нормальном потоке документа 
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Те си ры арии рва одна 
Рис. 10 + Относительно позиционированный элемент остается 
в потоке; при вычислении положения других элементов 
учитывается его начальная позиция, а окончательная 
игнорируется 
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Рис. 11 4 Напротив, абсолютно позиционированный элемент не 
оказывает никакого влияния на нормальный поток документа. 
Игнорируется не только его новая, но даже и начальная позиция 


Относительное 
позиционирование 


В случае относительного позиционирования элемент 
не изымается из нормального потока. Сначала опре- 
деляется естественная позиция элемента, а затем эле- 
мент сдвигается относительно нее. Таким образом, на 
странице остается «дырка», которую другие элемен- 
ты должны, тем не менее, принимать во внимание 
(рис. 9, 10 и 11). 


Относительное позиционирование чаще всего при- 
меняется для сдвига элементов; элемент, первона- 
чально расположенный в ячейке сетки, можно легко 
вынести за ее пределы. Можно также осуществить 
тонкую подгонку, когда никакие другие способы по- 
зиционирования неприменимы. Например, Саваре- 
зе с помощью относительного позиционирования 
переместил дракона из его естественной позиции под 
белой областью контента в левый угол хвостовика. 
Применить абсолютное позиционирование к элемен- 
там, находящимся в нижней части макета, гораздо 
труднее, чем к элементам, расположенным ближе к 
началу, поэтому в данном случае использование от- 
носительного позиционирования позволяет решить 
задачу более простым способом. 


Гибкость и регулярность 


Процедура «эволюционного дизайна», примененная 
Седриком Саварезе, может привести к хаосу, если не 
знать меры. Понимание модели позиционирования и 
пропорций позволит избежать лишних проблем, а на- 
ложение на макет сетки — добиться гармоничного ре- 
зультата. 
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Дизайнер Дэн Рубин (Вап Кип) 


\уимим.с$52епдагдеп.сот/024 


Не так уж бедно 


Решение типичных проблем перекрытия 


Название «Не так уж бедно» вызывает воп- 
рос: «Не так уж бедно, как что». С этим ди- 
зайном связана целая история. Первая рабо- 
та Дэна Рубина, присланная на сайт еп 
Саг4еп, создавалась с целью добиться мак- 
симально возможной простоты. Оригиналь- 
ную версию Сга?ау можно посмотреть на 
странице ммм.зирегЙаоцзБаткег. оге/ргодесё$/ 
2епраг4еп/этагау/2епоаг4деп-отахау Вт. 


Рубин прислал вариант Сгагау (рис. 1), выб- 
рав очень простую цветовую гамму и шриф- 
ты (РЕ ОПХ Сопдепзе4 и Уег4апа). Признавая 
ценность хорошего минималисткого дизай- 
на, мы все же создавали сайт (еп Саг4еп с це- 
лью избавиться от клейма минимализма, 
приписываемого С5$. Тогда Рубин доработал 
Статау, добавив графику, и то, что получи- 
лось, назвал «Не так уж бедно». 


| | Когда контента слишком много 199 
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Рис.1 + Оригинальный дизайн Сгагау показывает, 
по сравнению с чем вариант «Не так уж бедно» оказался 
не таким уж бедным 


ПРИМЕЧАНИЕ | 


Сочетание дизайна, основанного на стандартах, с контентом, 
генерируемым системами (СМ$, наталкивается и еще на одну 
проблему: многие популярные программы порождают некор- 
ректную разметку, включающую, помимо прочего, устаревшие 
презентационные теги. Применение стилей к тегу ЕопЕ - это 
бессмыслица, а заказать разработчику специализированные 
доработки обычно не по карману большинству потребителей. 


Когда контента 
слишком много 


При верстке страницы с помощью С5$ очень часто при- 
ходиться бороться с неопределенностью, присущей 
\М/еБ. Точнее, проблема состоит в том, как быть с пре- 
допределенными значениями ширины и высоты в (55$ 
в случае, когда объем контента заранее неизвестен. 


Неопределенность длины контента — неотъемлемая 
особенность веб-страниц, которые могут содержать 
как много, так и мало информации. Программы, уп- 
равляющие динамическими сайтами (например, сис- 
темы управления контентом — СМ5), могут вставлять 
контент переменной длины — совсем короткий или 
весьма и весьма пространный. 


Если ни автор, ни система СМ$ не налагают жестких 
ограничений на длину контента — а обычно это нере- 
ально, то нужно обязательно проверять, как будет выг- 
лядеть любая содержащая контент область при разной 
его длине. Поведение текстового контента менее пред- 
сказуемо, чем графического, так как размеры изобра- 
жений известны заранее и не изменяются. Но даже это 
не является непреложным правилом, поскольку СМ$ 
может вставлять несколько изображений или изобра- 
жения разной высоты. Да и вообще есть множество 
факторов, приводящих к отличиям в размерах. 


Впрочем, ситуация постепенно улучичается, последние 
версии СМ$ генерируют корректную разметку в фор- 
мате ХНТМ!/С$$. К числу наиболее распространенных 
систем управления контентом можно отнести Огира| 
(мили. 4гара|. ог?) и Матабо (мумии лаатабозегуег. сот). 


Многие современные браузеры предоставляют пользо- 
вателю возможность изменять масштаб текста, и люди 
со слабым зрением этим активно пользуются. При уве- 
личении размера шрифта тоже возможно нежелатель- 
ное перекрытие. Если занятая контентом область уст- 
роена так, что проблемы с переменной длиной текста 
невозникает, то теоретически не должно быть и слож- 
ностей из-за масштабирования. Но короткие фрагмен- 
ты текста, например навигационные ссылки, часто 
страдают от этой проблемы. Мы рекомендуем всегда 
проверять, выглядит ли страница приемлемо при уве- 
личении размера шрифта на 150% и даже больше, по- 
скольку обязательно найдутся пользователи, которые 
захотят так сделать. 


|. 124 Верстка | ванных 


Рано или поздно вы, скорее всего, столкнетесь с ситу- 
ацией, когда область контента переполняется по вер- 
тикали или по горизонтали. В результате вы увидите 
либо перекрывающийся контент, либо область, про- 
стирающутюся далеко вниз, — гораздо дальше, чем сле- 
довало бы. Первое указывает на некорректное абсо- 
лютное позиционирование, второе — свидетельство 
наличия плавающих объектов, слишком высоких или 
широких для отведенной под них области. 


Переполнение СОВЕТ 
ый Эрик Мейер написал большую статью на тему плавающих 
в плава ющих объектах объектов «Сопатта Ноа{5», обязательно прочитайте ее 


(ммм. сотр!ехзрта|.сот/рибИсаНоп$/ сотанлд-Поа{$). 


Строго говоря, атрибут Е1оаЕ - это не инструмент 
верстки. Плавающие объекты предназначены для того, 
чтобы текст мог обтекать строчные элементы, их при- 
менение для верстки макета никогда не рассматрива- 
лось. Но нам приходится пользоваться плавающими 
элементами по одной простой причине: нет другого 
способа расчистить место (еаг) для контента. 


В простейшей формеатрибут с1еах и вся концепция 
расчистки сводятся ктому, чтобы сказать браузеру, что 
некий элемент не следует начинать рисовать, пока не 
будет завершен какой-то другой элемент. Проблема 
переполнения при абсолютном позиционировании по 
большей части проистекает из невозможности расчи- 
стить место, занятое позиционированным объектом. 


Но механизм плавающих объектов не идеален, и его 
несовершенства еще ярче проявляются из-за неоди- 
наковой поддержки браузерами. 


Для расчистки нужна СОВЕТ 
подходящая разметка Существует также метод расчистки места за плавающими 


объектами, не требующий вставки специального элемента в 
Чтобы механизм расчистки правильно работал, в НТМЕ-разметку. Правда, чтобы он работал во всех браузерах, 
НТМЕ-коде должны присутствовать по крайней мере придется воспользоваться несколькими интуитивно неоче- 
два элемента: тот, к которому применяется свойство видными трюками. См. статью «Ном +0 Цеаг Ноа МИНоцЕ 
Е1оаЕ, иещеодин; который расчищает место. Два эеисфита! Магкир» на странице ммм. роз Ноп1земегуАта. пе 
могут «уплыть» соответственно налево и направо, но | ®25УЧеайпа. ти. 
тогда понадобится третий, который прекратит обте- 
кание, Часто можно воспользоваться уже существую- 
щими в разметке элементами, например, прекратить 
обтекание плавающего 13 с помощью одного из сле- 
дующих за ним абзацев р. 


Но иногда приходится мириться с неизбежным злом: 
добавлять лишний пустой элемент в разметку седин- 
ственной целью расчистить место, Для таких случаев 
мы рекомендуем универсальный Я1 у, не содержащий 
никакого контента: 


<Я1\у с1азз="с] еаг"></а1\у> 


ТНЕЯОАО ТО ЕМИВНТЕММЕМТ о 


Оз, ей в Би Нк НЕ НЫ рые: ОРЗ р НЗ те Бр р веыый 
Баееая НЕ ра обе Ро ня РЕ ША ный Вы сея Бони пить | 


Рис. 2 4 Если плавающие элементы оказываются слишком 
шмрокими для отведенной под них области, то один или несколько 
из них могут быть вытеснены и окажутся ниже остальных 


К этому классу может быть применено свойство 
с1еахк. Решение некрасивое, но оно работает и не 
слишком загромождает структурную разметку ненуж- 
ными элементами. 


При размещении плавающих 
объектов нужна точность 


Если наполнить аквариум до краев, а потом всыпать в 
него горсть песку, что произойдет? Понятно что — 
часть воды выльется. 


У плавающих объектов аналогичные ограничения, 
связанные по большей части с переполнением по го- 
ризонтали. Если два плавающих объекта, каждый ши- 
риной в 50% окна, расположить один за другим и за- 
дать для первого поле шириной 100 пикселей, то 
второй будет вытеснен и окажется под первым. По- 
этому нужно заранее рассчитывать ширину. 


Но Мегозо_ Ииегпе! Ехр]отег для МЛп4о\м$ не поддер- 
живает атрибуты м1аЕН и Веза!Е так, как это реко- 
мендовано в спецификации С$$. Предполагается, что 
элемент, контент которого шире, чем значение 1 а, 
попытается перерисовать свой контент, аесли это не 
получится, то оставит ширину‘неизменной и позво- 
лит контенту «выплесвуться» заграницы контейнера, 
Смысл в том, чтобы не менять положение плавающе- 
го объекта, даже если контент начинает перекрывать 
другие элементы. 


Но ИНцегпе! Ехр|огег позволяет элементу раситирять- 
ся по мере необходимости. Как только плавающий 
объект становится хотя бы на пиксель шире допус- 
тимого, он вытесняет другие плавающие объекты 
(рис. 2). Решить эту проблему можно несколькими 
способами. 


Сделать область шире 


Если есть возможность увеличить ширину области, в 
которой размещены плавающие объекты, то этого 
может оказаться достаточно. Такое решение не опти- 
мально, но начать нужно с него, поскольку реализует- 
ся оно очень просто. 


Ограничить ширину контента 


Если можно гарантировать, что контент никогда не 
вызовет переполнения по горизонтали, то проблемы 
удастся избежать. Обычно такое решение нереалис- 
тично, поскольку если бы контент не был слишком 
широким, то проблемы бы вообще не возникло. 


Иногда, чаще всего в И{еглее Ехрюгег для У/ао\5, 
встречается одна особенно глупая ошибка, из-за ко- 
торой контент, казалось бы, имеющий нормальную 
ширину, все-таки вызывает переполнение. Если вы с 
этим столкнетесь, посмотрите, нет ли в области, заня- 
той плавающим объектом, текста, отображаемого кур- 
сивом, Если есть, попробуйте убрать курсив и посмот- 
рите, не решит ли это‘проблему. В Ииегпе! Ехр]огег 
курсив может приводить к переполнению, и если его 
отключение помогает, то виновник найден. Вообще- 
то никакое форматирование текста не должно вызы- 
вать такого эффекта, но жизнь есть жизнь. 


Обработать переполнение 


В следующем разделе мы рассмотрим свойство 
оуегЕТом в применении к переполнению по верти- 
кали, носего помощью можно обработать и перепол- 
нение по горизонтали тоже. Впрочем, подобное реше- 
ние зачастую выглядит неэстетично, так что мы 
рекомендуем не злоупотреблять им. 


Переполнение 
при абсолютном 
позиционировании 


При абсолютном позиционировании чаще всего воз- 
никают проблемы с переполнением по вертикали. 
Исключение составляют случаи, когда для позицио- 
нированного элемента задана ширина, а отведенная 
под него область оказывается недостаточно широкой 
(рис.3). 


Переполнение по вертикали 


Сталкиваться с переполнением по вертикали при- 
ходится куда чаще. Проблема проста: за абсолютно 
позиционированными элементами нельзя расчис- 
тить место, как за плавающими. Если элемент. по- 
зиционирован, то он изымается из нормального 
потока документа и перестает оказывать влияние на 
своих соседей, 
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Рис. 3 + Элемент #11пК1 1 зе шириной 150 пикселей 
не помещается в отведенную под него область шириной 100 пикселей 
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Рис. 4 + Если бы область, занятая контентом, была короче, 
то абсолютно позиционированная левая колонка в дизайне 
«Не так уж бедно» наехала бы на хвостовик 


Такая неприятность часто возникает при размещении 
хвостовиков страниц — абсолютно позиционирован- 
ная колонка может оказаться длиннее других колонок, 
определяющих положение хвостовика. В этом случае 
позиционированная колонка «наедет» на хвостовик 
(рис. 4). К сожалению, настоящего решения этой про- 
блемы не существует, только обходные пути. 


Пользуйтесь плавающими 
объектами 


Самый эффективный обходной путь — пользоваться 
плавающими объектами вместо абсолютно позицио- 
нированных и существующим для них механизмом 
расчистки места. Конечно, это не всегда возможно, но 
коль скоро верстка позволяет применить плавающие 
объекты, рассмотрите этот вариант. 


Попробуйте изменить дизайн 


Вместо этого можно дать абсолютно позиционирован- 
ному элементу расти вниз по вертикали без ограни- 
чений. Если он перекрывает хвостовик, то можно пе- 
репроектировать последний, ограничив его ширину. 
Если ниже позиционированного элемента ничего нет, 
то и перекрывать нечего. 


Обработка переполнения 


Чем пытаться управлять длиной контента, гораздо 
удобнее воспользоваться механизмом автоматической 
обработки переполнения, встроенным в С$$. Свойство 
оуегЕ1 ом было специально придумано для этой цели, 
но назвать его «серебряной пулей» все же нельзя. Если 
ограничить высоту элемента 150 пикселями и указать 
для свойства осуегЕТом значение ацбо, то область 
будет обрезана точно по указанной высоте, а для про- 
смотра не поместившегося контента пользователь 


получит полосу прокрутки. 


Однако слишком большое число полос прокрутки на 
одной странице раздражает пользователей. Можно 
вместо ацбо задать значение п1аЧеп, тогда непомес- 
тившийся контент вообще не будет показан. Но, как 


Верстка 


правило, скрывать контент таким образом не стоит, 
поскольку невидимый контент бесполезен для чита- 
теля. Впрочем, бывают ситуации, когда такой метод — 
как раз то, что нужно. 


Воспользуйтесь сценарием 


Если вы допускаете минимальное применение ]ауа5 стр! 
в дополнение к таблицам стилей, то решить проблему 
можно с помощью сценария. Один из авторов еп 
Саг4еп, Шон Инман (5Баиа шгап), предложил полез- 
ный метод расчистки места за абсолютно позициони- 
рованными элементами, аналогичный свойству с1еаг 
для плавающих объектов. Его сценарий приведен на 
странице АБзоцие Сеагапсе (ммгу.5Ваиитглап.сотл/ 
плеп(агу/ра$И абзоцие_сеагапсе.рйр). 


Задавайте размеры в ет, аневрх 


Этот совет применим только в случае, когда перекрытие 
возникает лишь из-за увеличения размера шрифта; пе- 
рекрытия вследствие динамического роста длины кон- 
тента он не излечит. Абсолютное позиционирование с 
точностью до пикселя обеспечивает максимальный кон- 
троль, но страдает от отсутствия гибкости - раз уж эле- 
мент позиционирован, то останется точно там, куда его 
поместили. Задание же для свойств Сор и 1еЕеЕ значе- 
ний, выраженных в единицах ет, дает чуть больше сво- 
боды, поскольку позиция будет зависеть от размера 
шрифта. Если размеры элементов, расположенных один 
под другим, заданы в ем, то при сдвиге нижнего края 
верхнего элемента сдвигается и верхний край нижнего. 
Этому методу недостает точности, но во многих ситуа- 
циях он работает. 


5 Зак. 1942 


Дизайн с переполнением 


Дизаин, учитывающий 
[ее] [®>/ 4 [* 9 = 
переполнения 


Абсолютно позиционированная левая колонка в ди- 
зайне «Нетак уж бедно» счастливо избежала перепол- 
нения, поскольку область, занятая контентом, оказа- 
лась гораздо длиннее. Если бы Хеп Саг4еп был 
большим сайтом, то могли бы встретиться страницы, 
на которых левая колонка была длиннее, а контент 
короче. Тогда бы все неприятности, проиллюстриро- 
ванные на рис. 4, вылезли наружу, и пришлось думать, 
как решить проблему переполнения. 


Несмотря на то что технические сложности не долж- 
ны бы влиять на решения, принимаемые дизайнером, 
при создании больших сайтов переполнение остается 
серьезной проблемой. Если вы сумеете построить ди- 
зайн так, чтобы эту проблему обойти, то технические 
ограничения не станут причиной горьких разочаро- 
ваний. 
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Береговой бриз, с. 158 


Арт Деко, с. 146 


Что там в глубине, с. 166 


Создание графических образов, оказываю- 
щих максимально сильное воздействие на 
зрителя, — важнейшая часть работы дизайне- 
ра. Рассмотренные в этом разделе варианты 
дизайна были отобраны за их выдающуюся 
графику. Решения, принимаемые в процессе 
работы над изображением, могут приводить 
к самым разным результатам. 


Вдохновляйтесь, изучайте методы манипули- 
рования изображениями, пополняйте свои 
знания о библиотеках фотографий, учитесь 
создавать собственные визуальные элемен- 
ты, когда того требует ситуация. 
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Дизайнер Масанори Кавачи (Мазапот Камасй1) 
уулм.с$52епдагдепт.сот/096 


= ЯПОНСКИЙ Сад 


Форматы и оптимизация изображений 


«Ва» — японское слово, означающее гармо- 
нию. Иногда здесь подходит смелый, яркий 
дизайн. Но вариант «Японский сад» Масано- 
ри Кавачи взывает к более утонченной, уни- 
версальной эстетике. Он попытался уловить 
суть «ва» и показать работу, которая понра- 
вилась бы представителям самых разных на- 
циональностей. 


Бросающиеся в глаза японские мотивы в выб- 
ранной Кавачи теме указывают на его проис- 
хождение, но мягкость визуальных эффектов 
и обаятельность графики произведут впечат- 
ление на любого зрителя, откуда бы он ни был 
родом. 


ПРИМЕЧАНИЕ 


В США ксередине 2004 года свыше 50% домашних пользова- 
телей были подключены к Интернету по широкополосному 
каналу. 


Какой формат выбрать 


Графические форматы 


Достичь изысканной прозрачности «Японского сада» 
можно, только хоропто разбираясь в имеющихся гра- 
фических форматах. Из тысяч разных форматов, 
применяемых в компьютерной графике, лишь три 
имеют непосредственное отношение к \еБ: СТЕ, ]РЕС 
и РМС. Все три позволяют. сжимать изображение, 
чтобы уменьшить его размер и тем самым ускорить 
загрузку, 


Почему так важна 
оптимизация 


Зачем нужно оптимизировать изображение? Ведь 
широкополосные каналы связи доступны повсемес- 
тно, к чему уж так-то скаредничать? Конечно, высо- 
коскоростной доступ в Интернет получает все более 
широкое распространение, но пока еще не стал об- 
щедоступным. Многие пользователи по-прежнему 
работают с модемами, дающими скорость не более 
56 Кбит/с, а в некоторых странах за пользование те- 
лефонными линиями взимают плату. Каждый лиш- 
ний килобайт увеличивает время загрузки, а каждая 
минута стоит реальных денег. 


Небудем забывать и о сервере. На сайты с высоким тра- 
фиком заходит много пользователей; чем большую 
долю полосы пропускания потребляет каждый посети- 
тель, тем шире должна быть общая полоса пропуска- 
ния, доступная веб-серверу, а значит, увеличивается 
плата за хостинг. Каждый килобайт, сэкономленный на 
графическом файле, оборачивается экономией денег как 
пользователей, так и владельцев сайта. 2 Кб тут, 2 Кб 
там — вроде немного, но в итоге выливается в солидную 
сумму. К примеру, если урезать на 2 Кб картинку, ко- 
торую каждый день просматривают 100000 посетите- 
лей, то общая экономия составит 6 Гб в месяц. 


Какой формат выбрать 


В разных графических форматах применяются разные 
цветовые модели, разные виды сжатия и разные фор- 
мы достижения прозрачности. Чтобы выбрать подхо- 
дящий формат, нужно знать сильные и слабые сторо- 
ны каждого, 


В случае сжатия без потерн информации сохраняются 
все детали изображения, при сжатии жес потерей ин- 
формации часть деталей утрачивается ради уменьше- 
ния размера файла. У каждого метода есть свои обла- 
сти применения. 


Глубиной цвета характеризуют максимальное число 
цветов в изображении. Глубина цвета измеряется в 
битах, чем больше бит используется для представле- 
ния цвета, тем больше общее число доступных цве- 
тов. Если глубина цвета равна 8 бит, то всего может 
быть 256 цветов, при глубине цвета 24 бит общее чис- 
ло цветов превышает 64 миллиона. 


Формат СЕ 


Дедушка всех графических форматов — СПЕ — суще- 
ствует в той или иной форме уже почти 20 лет, В нем 
применяется метод сжатия без потери информации, 
называемый [0М/, лучше всего он подходит для со- 
хранения изображений, в которых есть обширные 
области, закрашенные одним цветом. 


Хотя в формате С информация сохраняется без 
потерь, но в нем используется так называемый ин- 
декс цвета, аэто палка о двух концах. В одном изоб- 
ражении может быть не больше 256 цветов, поэто- 
му применение этого метода ограничено лишь 
изображениями, содержащими мало цветов. Зато 
для изображений, содержащих меньше 256 цветов, 
можно использовать меньший индекс цвета, что 
уменьшает окончательный размер файла (рис, 1-3). 
Изображения с большим числом цветов можно со- 
хранить в формате СТЕ, но ценой утраты информа- 
ции о цвете, в результате чего мы приходим к сжа- 
тию с потерей информации. 


Формат СТЕ поддерживает 1-битовую прозрачность. 
Это означает, что пиксель может быть либо полнос- 
тью прозрачным, либо полностью непрозрачным. 
Если вы привыкли к графическому редактору, рабо- 
тающему со слоями и обеспечивающему многоуров- 
невую альфа-прозрачность, то подобное ограничение 
раздражает. Но даже такой режим полезен, если за- 
ранее известно, на каком фоне будет отображаться 


СТЕ-файл. Кроме того, формат С! поддерживает 


простую покадровую анимацию и постепенную заг- 
рузку (эта техника называется черезстрочной разверт- 
кой). Правда, и то и другое приводит к увеличению 
размера файла, 
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Рис. 1 + Изображение сохранено в формате @1Е с 256 цветами, 
размер файла равен 8,6 Кб 
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Рис. 2 4+ Изображение сохранено в формате СЁ с 32 цветами, 
размер файла равен 5,0 Кб 


‚1 побеаибупс$$ ь 
65 Геп Сатает 


Рис. 3 $ Изображение сохранено в формате 1 с 4 цветами, 
размер файла равен 2,1 Кб 


- ПРИМЕЧАНИЕ 
| Цветной вариант рис. 1-3 см. на вкладке. | 
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Рис. 4 4+ Изображение сохранено в формате /РЕб с 
коэффициентом качества 70, размер файла равен 8,3 Кб 
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Рис. 5 4+ Изображение сохранено в формате /РЕб с 
коэффициентом качества 30, размер файла равен 3,7 Кб 
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Рис. 6 4+ Изображение сохранено в формате /РЕС с 
коэффициентом качества 10, размер файла равен 2,5 Кб 
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Рис. 7 + Изображение сохранено в формате РМО с глубиной 
цвета 24 бит, размер файла равен 16,2 Кб 
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Рис. 8 + Изображение сохранено в формате РМС с глубиной 
цвета 8 бит и 64 цветами, размер файла равен 5,3 Кб 
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Рис. 9 4+ Изображение сохранено в формате РМ с глубиной 
цвета 8 бит и 4 цветами, размер файла равен 2,2 Кб 


- ПРИМЕЧАНИЕ 


| Цветной вариант рис. 4-9 см. на вкладке. 


Формат )РЕС 


Благодаря 24-битовой глубине цвета формат ]РЕС от- 
лично подходит для сохранения фотографий и других 
многоцветных детальных изображений. ]РЕС допускает 
сжатие с потерей информации, если вы готовы пожер- 
твовать толикой деталей ради уменьшения размера 
файла (рис. 4—6). 


При сильном сжатии в изображении будут видны от- 
четливые диспропорции и мелкие дефекты отдельных 
пикселей, называемые артефактами. Хотя в более де- 
тальном изображения эти дефекты не так заметны, все 
же при использовании формата ]РЕС надо соблюдать 
баланс между приемлемым ухудшением качества кар- 
тинки и уменьшением размера файла. В ]РЕС прозрач- 
ность вообще не реализована, но ]РЕС с прогрессивной 
разверткой, функционально аналогичный СТЁ с через- 
строчной разверткой, поддерживается большинством 
браузеров (см. ниже раздел «Приемы оптимизации»). 


Формат РМС 


Вэтом формате, во многих отношениях похожем на СТЬ, 
есть два режима хранения цветов. РМ@-файлы с 24-би- 
товой глубиной цвета велики по размеру, пожалуй, даже 
слишком велики, зато не приводят к потере информа- 
ции. Сохраняются абсолютно все детали. В файлах жес 
8-битовой глубиной, как и в СИЕ, применяется индекс 
цвета, и во многих случаях степень сжатия оказывается 
даже выше, чем при сохранении того же изображения в 
формате СЕ с эквивалентными параметрами (рис. 7-9). 


Благодаря наличию двух режимов глубины цвета фор- 
мат РМС теоретически можно использовать для хра- 
нения любых изображений; на практике же лучше ог- 
раничиться только графикой с небольшим числом 
цветов, для которой обычно применяется формат СТЕ, 
а изображения фотографического качества сохранять 
в формате ]РЕС. Хотя в формате РМС с 24-битовой 
глубиной цвета информация не теряется, но достига- 
ется это ценой увеличения размера файла. 


Поддерживается также два режима прозрачности: 1-би- 
товый и 8-битовый. Первый не отличается от того, что 
есть в СТЕ, второй же обеспечивает все 256 уровней аль- 
фа-канала. 8-битовый режим прозрачности интересен 
тем, что можно заранее не думать, на каком фоне будет 
отображаться РМС-файл. К сожалению, полезность 
этого режима ограничена в силу слабой поддержки 


со стороны браузеров. В частности, Масгозо Пцегпе! 
Ехр!огег для УЛадо\$ плохо справляется с альфа-про- 
зрачностью в РМС-файлах. 


Вопросы прозрачности 


Несмотря на наличие огромного числа графических 
форматов, в У/еБ нашли применение только три вы- 
шеперечисленных. ]РЕС не поддерживает прозрач- 
ность вовсе, в СЕ реализована лишь 1-битовая про- 
зрачность, а 8-битовая прозрачность, предлагаемая 
форматом РМС, не поддерживается большинством 
современных браузеров. Проблема не нова и не связа- 
на непосредственно с С$5$. В прошлом десятилетии, 
чтобы использовать эффект прозрачности в \УеБ, во- 
обще приходилось прорисовывать изображения зара- 
нее и сохранять их в том или ином формате, не под- 
держивающем прозрачность. 


В «Японском саде» Кавачи выводит текст в колонках 
белого цвета, кажущихся прозрачными, поскольку они 
перекрывают изображение зеленых листьев (рис. 10). 
Формат СТЕ не допускает такого эффекта, тем не менее 
применяется именно он. Вместо того чтобы требовать 
поддержки прозрачности от браузера, Кавачи восполь- 
зовался слоями Адоре РВоозВор, и сохранил уже гото- 
вые изображения в С1Е-файлах. Картинки, выступаю- 
щие фоном, никак не задействуют прозрачности, 
именно в таком виде они и были подготовлены. Эф- 
фект перекрытия одного цвета другим достигнут лишь 
умелыми манипуляциями графикой в РВотозВор. 


При использовании прозрачных С-файлов нужно 
быть особенно внимательными; так как СПЕ обеспе- 
чивает только один уровень прозрачности, то полу- 
прозрачные пиксели должны отображаться на конк- 
ретном фоне, именуемом подложкой (таце со]ог). 
Подложка должна быть точно того же цвета, что и фон, 
на котором будет выводиться СТЕ-файл на веб-стра- 
нице, в противном случае будет отчетливо видна ка- 
емка из пикселей не того цвета (рис. 11-13). 


В М!еБ для создания эффекта прозрачности обычно 
применяется один из двух рассмотренных выше ме- 
тодов, поскольку они надежны и испытаны временем. 
Альфа-прозрачность, имеющаяся в РМС, могла бы 


Рис. 10 + В «Японском саде» сочетаются непрозрачные 
и псевдопрозрачные изображения 


Рис. 11 + Прозрачный СИЕ, который был подготовлен для белого 
фона, отображается на белом фоне 


Рис. 12 + Прозрачный СЕ, который был подготовлен для белого 
фона, отображается на светло-зеленом фоне 


Рис. 13 + Прозрачный СЕ, который был подготовлен для белого 
фона, отображается на темно-зеленом фоне 


ПРИМЕЧАНИЕ 


Цветной вариант рис. 11-13 см. на вкладке. 


п иемы оптимизации 


открыть новые возможности, но отсутствие поддер- 
жки со стороны Ицегпе{ Ехр|огег делает эти мечтания 
тщетными, Или все-таки нет? 


Если просто включить прозрачный РМС-файл в ди- 
зайн, то.в Ицегпе! Ехр]огег он будет выглядеть некра- 
сиво, но есть разные хитрости, позволяющие эту про- 
блему обойти. Правда, они работают только для 
П{егпе! Ехр]огег, но ведь работают же. 


Приемы оптимизации 


Чтобы получить файл небольшого размера, надо по- 
жертвовать качеством. Но чем сильнее сжимается 
изображение, тем уродливее оно становится, поэто- 
му лучше начать с высокого уровня сжатия и посте- 
пенно уменьшать его, пока качество не окажется 
приемлемым. 


Формат С@Е 


Для оптимизации СТЁ вы начинаете с небольшого 
числа цветов и увеличиваете его до достижения при- 
стойного результата. Начните с 8 цветов, потом по- 
пробуйте 16, 32, 64 и так далее, пока не будете удов- 
летворены. Для некоторых изображений требуется 
256 цветов (или даже больше, тогда придется обра- 
титься за помощью к ]РЕС), другие же не отличить 
от оригинала даже при использовании всего 8 или 
16 цветов. 


На размер СТЕ-файла влияют и другие факторы. На- 
пример, с помощью псевдосмешения цветов (4ИВегип?) 
можно заполнить область одного цвета узором из то- 
чек близких цветов -— в результате достигается иллюзия 
наличия большего числа цветов, чем есть в действитель- 
ности. Но применение этой методики снижает эффек- 
тивность сжатия. Если вместо псевдосмешения просто 
увеличить число цветов в палитре, то размер файла 
может получиться даже меньше. 


В Ррою5пор сравнительно недавно появилась возмож- 
ность сохранять изображения в С! -файлах с потерей 
информации. Как бы сильно вы ни сжали файл пред- 
варительно, включение этого режима обычно позво- 
ляет еще больше сократить размер - конечно, за счет 


ры Е Графика _ | дыиисиадЬЫ 


качества. При очень небольшом коэффициенте поте- 
ри качества — скажем, 5—6 процентов -- размер файла 
часто удается уменьшить на 20-30 процентов. 


Формат )РЕС 


Оптимизация ]РЕС - гораздо более простая процеду- 
ра. В графическом редакторе обычно имеется ползу- 
нок, с помощью которого задается уровень качества. 
Чем выше качество, тем больше файл; чем качество 
ниже, тем файл меньше. Для начала задайте невысо- 
кое качество и постепенно увеличивайте его, пока 
изображение не будет выглядеть прилично. 


Современные браузеры поддерживают и другие возмож- 
ности формата ]РЕС. Онтимизированное изображение 
дает чуть более высокий коэффициент сжатия, чем по 
умолчанию. ]РЕС с прогрессивной разверткой лучше 
применять для больших фотографий, при этом раз- 
мер файла несколько увеличивается. Размывание (Ышг) 
изображения также позволяет еще уменьшить файл. 


| | Трудный выбор 


ПРИМЕЧАНИЕ Формат РМС 


Способы включить прозрачный Р№б-файл в состав страни- р АВА 

цы, которая будет просматриваться в Тпфегпе! Ехр(огег, опи- | Оптимизация 8-битового РМС-изображения мало чем 

саны в статьях «Р№  Вераутот» (НЕр://мех.еае.пе/дретИ отличается от аналогичной процедуры для СТЁ: вы 

рпабепамтог/рпдБепамтог. т) и «Сго$$-Втомзег МапаЩе можете выбрать число цветов и включить режим псев- 

ОрасИу мий Р№ : А Веа[ Зои топ» (мии. ай ${арагЕ.сот/ яровать 24-битовое РМС-изоб- 

| ай ‹ез/рпдорасКу). ражение вообще нельзя, приходится ограничиваться 
тем сжатием, которое заложено в самом формате. 


Трудный выбор . 


До тех пор пока альфа-прозрачность, встроенная в 
формат РМС, не будет корректно поддерживаться все- 
ми браузерами, придется прибегать к технике предва- 
рительной подготовки «прозрачных» изображений, 
которой воспользовался Кавачи. 


Выбор подходящего формата файла- это компромисс 
между уровнем прозрачности, глубиной цвета и сте- 
пенью сжатия, Вы должны осознавать, какие возмож- 
ности имеются в вашем распоряжении. 
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Дизайнер Дэвид Хелльсинг (Бама Не($1пд) 


\ииим!.с$5$2епдагдеп.сот/102 


Революция! 


Включение изображений в таблицу стилей 


Графика играет важную роль для передачи 
настроения, задания тональности и привле- 
чения взгляда зрителя. Не менее важны пра- 
вильные способы включения графики в со- 
став страницы. 


Как первая автоматная очередь на тихом до 
той поры поле боя, доминантный образ сра- 
зу же привлекает внимание. Осознавая выра- 
зительную силу начальной иллюстрации, 
Дэвид Хелльсинг обратился к старым пропа- 
гандистским плакатам и таким приземлен- 
ным источникам изображений, как намокшая 
бумага, чтобы задать нужную ему тональ- 
ность. Кровь и краска, грязь и звезды - со- 
ставные части «Революции» — гарантируют 
пронизывающий, берущий за душу визуаль- 
ный эффект. 

Ключом к дизайну было соблюдение баланса: 
в противовес военным и политическим ассо- 
циациям, вызываемым заголовком, Хелльсинг 
выбрал спокойное и легкое оформление обла- 
сти контента. Для создания объектов и типог- 
рафских эффектов он воспользовался про- 
граммой Адобе Шизга(ог, а затем объединил 
все вместе в Ааофе РВоюз$Нор. 


| Подстановка изображения пет 


с5$ еп Сагдеп 


Рис. 1 + Фоновое изображение с видимым текстом, 
примененное к элементу 11 


СОВЕТ 


Обратите внимание, что порядок следования атрибутов фоно- 
вого изображения существенен; например, для позициониро- 
вания нужно, чтобы сначала указывалась позиция по горизон- 
тали, а потом по вертикали, то есть 1е ЕЕ, затем сор. Впрочем, 


когда позиция описывается ключевыми словами (как, скажем, 
]1еЕС и Сор), это не очень важно, а вот если применяются 
единицы измерения, к примеру, % или рх, то неправильный 
порядок приводит к ошибке позиционирования. 


с5з еп Сагдаеп 


Рис. 2 + Фоновое изображение обрезано по вертикали 
в том месте, где кончается текст 


Практическое применение 


Разрабатывая дизайн страницы с помощью С55, нуж- 
но придумать какой-то способ включения таких хоро- 
шо проработанных изображений, как заголовок в ра- 
боте Хелльсинга. Дизайнера, привыкшего к тегу 1тпд, 
знакомство с исходным текстом сайта Йеп Саг4еп при- 
ведет в замешательство, поскольку механизм вставки 
графики неочевиден. Понятно, что вся работа возло- 
жена на С5$-файл, но как именно это делается? 


Есть несколько способов связать картинку с элемен- 
том спомощью таблицы стилей, но лишь один из них 
достаточно хорошо поддерживается на практике - 
фоновые изображения. Чтобы присоединить картин- 
ку, скажем, к тегу Н1 в Деп Саг4еп (рис. 1), применя- 
ется довольно простой синтаксис: нужно задать путь 
к файлу картинки, его позицию и способ повтора (если 
его вообще нужно повторять): 

й1 { 

Баскагомпа: иг1(раей/во/1таде.91Е) 
по-гереае; 


} 


1еЕЕ Гор 


Если задан атрибут по-гереас ‚, то, скорее всего, для 
изображения необходим объемлющий элемент с точ- 
но заданными размерами, за который оно не должно 
выступать. Если не заданы ширина м1 АС или высо- 
та петаре, то (если, конечно, изображение не совсем 
крохотное) высоты текста окажется недостаточно, что- 
бы вместить всю картинку, в результате чего она об- 
режется (рис. 2). В большинстве случаев следует ука- 
зывать размеры исходного элемента, достаточные для 
всего фонового изображения: 
се: 
Баскагоцпа: иг1(раЕП/со/1тмаде. 91Е) 
по-гереае; 
400рх; 
20рх; 


ТеЕс сор 


итаЕН: 
ВетаНеЕ: 
} 


Подстановка 
изображения 


Не всегда желательно оставлять текст поверх фоно- 
вого изображения. Во многих вариантах дизайна (еп 
Саг4еп изображения подставляются вместо различных 
заголовков и скрывают текст. 


В марте 2003 года Дуглас Боумен опубликовал на сво- 
ем сайте 5ор4езеи статью (ммм. 5{ор4еяет.сот/ 
атисез/гер!асе_{ех(), в которой описывалась техника 
замещения текста фоновым изображением ради 
улучшениятипографских черт страницы. Позже этот 
метод получил название «подстановка изображения 
Фарнера» (Рабгпег таре Кер!асетеп — ЕВ) в честь 
Тода Фарнера (То@4 РаБгпег), который первым пред- 
ложил его. Основная идея проста: поместите текст 
внутрь элемента зрап, скройте содержимое этого 
зрап и свяжите изображение с самим элементом. Вот 
пример подобной разметки: 


<Н1 194="радеНеадег" ><зрап>свз деп багаеп</зрап></ 
21> 


Теперь для подстановки изображения достаточно при- 
менить такую таблицу стилей: 
#раденеаает { 
Баскагоцпа: иг] (]1етопЕгезВ.91Е) 
гереас; 
мтасн: 400рх; 
незтаНе: 20рх; 
} 
праченеааег зрап { 
Я1=р1ау: попе; 


} 


Любой зрап внутри элемента #радеНеа@ехг будет 
полностью скрыт от браузера, если применить к нему 
свойство 91зр1ау: попеили\1$151116у: Р1ааеп. 
Хелльсинг попробовал и то и другое — с одинаковым 
результатом. Этот прием очень популярен, не буль его, 
сам сайт {еп Саг4еп вряд ли состоялся бы. Подстанов- 
ка изображений играет фундаментальную роль в обес- 
печении максимальной гибкости дизайна на основе С$$. 


Еор 1еЕЕЁЕ по- 


Чем грозит подстановка 
изображений 


В оригинальном варианте техники подстановки изобра- 
жений, в котором использовалось свойство Я1зр1ау: 
попе, ставилась задача не просто заменить текст, но сде- 
лать это разумно. Компьютер неможет прочитать текст, 
нарисованный накартинке, если ему немного не помочь. 
Если бы картинка не сопровождалась альтернативным 
описанием с помощью атрибута а1%, то элемент 19а 
был бы вообще бесполезен для поисковых систем типа 
Соове и для альтернативных программ представления 
страницы, не способных прорисовывать изображения 
(например, программ чтения с экрана, которые воспро- 
изводят содержимое экрана голосом). Но, поскольку ЕК 
помещает изображение поверх текста, уже имеющегося 
в НТМГ-документе, то все должно бы работать. 


ПРИМЕЧАНИЕ 


Включить изображение можно также с помощью сгенериро- 
ванного контента. Этот прием позволяет заменить имеющий- 
ся контент элемента своим собственным: 


1 { 
сопеейЕ:; иг] (а1Чепее.91Е); 
} 


Первоначально (в (552) это был способ манипулирования псев- 
доэлементами : БеРоге и :аЁГех, но позднее - в ($553 - 
превратился в гораздо более универсальное свойство. Одна- 
ко браузеры только-только начинают поддерживать его, так 
что пока мы рекомендуем пользоваться сгенерированным кон- 

тентом только ради эксперимента. | 


ПРИМЕЧАНИЕ 


Программа чтения с экрана пользуется теми же синтаксичес- 
кими анализаторами, что и основные браузеры, например 
Гпбегпее Ехр(огег, поэтому любой текст, не прорисовываемый 
браузером, не будет и произноситься, 


ПРИМЕЧАНИЕ 


Были высказаны частные мнения (например, статья Дэйва Ши 
«п Оегепзе оЁ Райгпег 1таде Кер(асетепт», ммм. 9тдтка|- 
меб. сот/ага(е/лп_е{епзе_оГ_авгпег_\таде_тгер{асетет) 
и проведены исследования (см. статью Джо Кларка «Гас апа 
Ортттоп$ АБоц{ Райгпег Ттаде Керасетеп», ммим ай${араг.сот/ 
агаез/Яг). В результате стало очевидно, что схема ЕК в своем 
первоначальном виде неработоспособна — фундаментальный | 
метод, так много сделавший для признания (55, оказался не- 
применим на практике. И что теперь? 


ПРИМЕЧАНИЕ 


На личном сайте Дэйва Ши есть страница, где рассматрива- 
ются различные вариации на тему подстановки изображе- 
ний (ммм. те220ие.сот/(ез{5/ гем15ед-итаде-гер[асетепу). 
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Улучшенная методика 


Однако выявилась проблема. Соое может прочитать 
скрытый текст, а вот некоторые программы чтения с 
экрана не могут, Схема ЕГВ задумывалась для того, 
чтобы предоставить доступ к описанию изображения 
незрячим пользователям, но в некоторых случаях она 
просто не работает. Кроме того, если пользователь 
отключает показ графики, но оставляет С$$ включен- 
ным, то браузер вообще ничего не покажет. Ну и, на- 
конец, дополнительные эрап тоже что-то «весят», это, 
конечно, небольшая проблема, но все-таки... 


Улучшенная методика 


Когда описанный выше метод ЕТК приобрел популяр- 
ность, упомянутые проблемы вышли на передний 
план. Может ли дизайнер со спокойной совестью при- 
менять технику, которая скрывает содержимое неко- 
торых элементов от части людей и программ: К счас- 
тью, примерно в то же время начали появляться 
альтернативные методики подстановки изображений. 
Во многих из них какие-то фундаментальные пробле- 
мы решались, тогда как другие оставались нерешен- 
ными, В некоторых применялись тяжеловесные трю- 
ки с целью обеспечить межбраузерную совместимость. 
Когда писалась эта книга, еще не было найдено иде- 
альной во всех отношениях схемы; имелись только 
более или менее удачные компромиссы. 


Схема Леа-Лэнгбриджа 


СимусЛеа ($еатлиз ГеаНу) и Стюарт Лэнгбридж (5шап 
Гапебиаве) независимо открыли метод, позволяющий 
избавиться от лишних зрап и визуально скрыть текст, 
оставив его в то же время доступным программам чте- 
ния с экрана. К сожалению, из-за ошибок в реализации 
модели прямоугольных областей в версиях Пцегпе! 
Ехрюгег для М/п4ом/; младше 6.0 пришлось придумы- 
вать специальные обходные пути для этих браузеров. 


Разметка 


<НЗ 14="Неааег">т 11Ке со]а.</ВЗ> 


Таблица стилей 


$Зтеадет ({ 

рая та: 25рх 000; 

оуегЕ1ом: Н1ааеп; 
Баскагоцпа-1таде: иг1(со1а.91Е); 
Баскагоцпа-гереае: по-гереае; 
Везаве: (Орх !\мросбапе; 


ВезоНе: /**/:25рх; 


Аргументы за: доступна программам чтения с экра- 
на; нет лишних зрап. 


Против: не решает проблему отключения графики при 
включенном С55. Необходимы обходные трюки. 


Поддерживается браузерами: \/114о\м$ — Ицегпе! 
Ехр]огег 5.0+, Ме{саре 7, Орега 6+, ЕгеРох. МаситозВ — 
[иегпе! Ехр]огег 5.2, баРам, ЕхеГох. 


Схема Рандла 


Дизайнер Майк Рандл (Мще Кипа) предложил ре- 
шение, в котором для выталкивания текста за левую 
границу окна используется отрицательное значение 
свойства сехе-1паепс, Решение простое и элегант- 
ное, хотя в некоторые случаях неприменимое, так как 
Пцегпе! Ехрюгег для \/Ишм@о\$ 5.0 вместе с текстом 
выталкивает и фоновое изображение, 


Разметка 


<Н3З 1а="Веадег">Арр]е р1е м1СН сНеадаг?!</В3з> 


Таблица стилей 


}ЦНеа@дег ({ 

сехс-1паепЕ: -5000рх; 

БаскагоипЯ: иг] (ватр]е-1таде.91Е) по-гереае; 
ВезанЕ: 25рх; 

} 


Аргументы за: доступна программам чтения с экра- 
на; нет лишних зрап. Красивая и несложная таблица 
стилей. 


Против: не решает проблему отключения графики при 
включенном С55. Не всегда правильно работает в 
иегпе! Ехр|огег 5.0 для УЛп4о\. 


Поддерживается браузерами: \Лш4о\м$ — Ицегпе{ 
Ехр|огег 5.5+, Ме{зсаре7, Орега 6+, ЕтеРох. МаситозВ — 
Пиегпе! Ехр]огег 5.2, баЁам, ЕгеРох. 


Схема Левина 


Александр Левин выступил с парадоксальной идеей: 
вместо того чтобы размещать текст внутри зрап, вы- 
несем его наружу и оставим то и другое внутри роди- 
тельского элемента, а затем уже пустым эзрап накроем 
текст. Если все сделать правильно, то программы чте- 
ния с экрана будут довольны, и проблема выключен- 
ной графики при включенном С$$ тоже будет реше- 
на. Правда, возникает новая трудность: изображение 
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не должно быть прозрачным, иначе сквозь него будут 
видны фрагменты текста. Да и соответствующая таб- 
лица стилей -— зрелище не для слабонервных. 


Разметка 


<В3З 1а="гер1асе" 19="“тув1">Апа а ЯазНн оЁ 
ТНуще. <зрап></5рап></Н1> 


Таблица стилей 


‚гер1асе { 

роз1Е1оп: ге1ас1 уе; 

мата1п: Орх; раЯаа1па: 0рх; 

/* скрыть осуегЕ1ом:В1Чаеп от ТЕ/Мас \*/ 


оуегЕ1ом: Н1ааеп; 
/* */ 


‚гер1асе зрап { 

А?эзрЪау: Ъ1осКк; 

розтЕтоп: аБзоиие; 

гор: Орх; 

ТтеЕЁ: Орх; 

2-1паех: 1; /* для Обрега 5 иб6 */ 
} 

#туН1, #тур1 врап ({ 

ретоНе: 25рх; 

УтаЕН: 300рх; 

БаскагоцпЯ9-1таде: иг1(ЕПуме.рпа); 
} 


Аргументы за: доступна программам чтения с экра- 
на; нет лишних зрап. Решает проблему отключения 
графики при включенном С$$. 


Против: Следует избегать прозрачных изображений. 
Громоздкая таблица стилей. 


Поддерживается браузерами: \М/п4о\м$ — Пиегпе! 
Ехр]огег 5+, Мезсаре 7, Орега 6+, ЕтеРох. МасицюозВ — 
цегпе! Ехр|огег 5.2, ЗаРат, ЕигеГох. 


Альтернативные варианты 


Так какой метод использовать? Выбор за вами. В ожи- 
дании того дня, когда большинство браузеров начнут 
поддерживать автоматически сгенерированный кон- 
тент, методы Леа-Ленгбриджа, Рундла и Левина - это 
лучшее, на что можно рассчитывать. Существующие 
варианты дизайна сайта еп Саг4еп, в том числе и «Ре- 
волюция» Хелльсинга были бы невозможны без того 
прогресса, к которому привела оригинальная схема 
ВВ; в будущих вариантах, наверное, станут приме- 
няться альтернативные схемы, обеспечивающие боль- 
шую доступность. 


АНаееы по аеы ат] бы у тай Тыр БЫ а пей 1 РБА АН Бы ОРЛЫ р, 
ыетыьаоЬы Сун. 9 Бгшет © $ РЫРРУНТ. 
Е а ТЫ 
Е Е а ЕТ 
ПЕР енг РиНаЕИ 


Тез ар сан агтан НИЯ ром 62 ааа де сое БП И БН ыы Беван И ие 
рнарыегТ. ба рет Га. ве Вы _ Баст Ты вам Мы стай т Гы та бысолнвыиюьй 
В ЕО 


С МАНАТ 15 ТН АВС 


вЫ Ру фай а ке г о Ре ца ванная Ве упырь агоны, Тре ЭеЧ 
т а а в 
а аеБнХ саетерия Но ЧЕ И. СОБ СА ВИТ ре выИ фа Ми не Зе ит Ча 
а Ре ТЕ 
И р 


И 
фм ынр Зы сию Г О 13 Чел ртр польвный ве Фр бетосл Рег 
Ра Фа ыы Е. О Е ГО ги ОаоН-й сло ВЫ Кови в нове Ба Ва че Ва 
Е РЕ Е ТО 


| Чазтеввывивья Я Буи ион в тт ссьфаги. Снеьнртто Мани 92.1 паи На пъае И 
| Тыва во очен 


Е 
В О А 
а т Гозеые болг &еаНЕыЙ 
Бы мы! Пра вн веер и 204. 

оны па Ри Ша ре ера ана кая пы Е, ВЫ Гы Вы ЗГТ _ ТН Е 
О а, 
Боб о Бер герое, ВЯ ав Бе Бастое ГИе ва в НВ 


Боеннйкна 9 Шор звныстя Бы Ва ый кое КИ Рыб в нее Би Буи роны 
р ВЕР М Е ДИ В 
БЕН таг шаа В 10 № в варят гыг то САНЯ Фей ыБ п Балы Ба ба Ба 
т 
вы и: ВЫ 7 а” фиг жг 


— - -- -з >= ыы ние = 
Е Е Я 
ан МНЕ оне г СО фаре зар, Те зе БОЕ Вен, аки Бат МНЕ 2 
О О 
а ышиыы ооеелит: ПИ Цыт ар над ада 


Мен лы В вне ав ть а во рснеыы. © ВЫ былые Быть Ть 

пе рено Вин ветра энер, Ты гар освн Зри Н ррщый ФаеигьнИ, ира 
О т 
Пе даа ый Пет и влеи м; Вы рые ЕТ маны, 

остова т, Око ге жевт Был ВВ м заРЫНе ет ИВ 
Е СЯ ГЫМееант БРеУНННИь ВО НЕя Ар средь, Не ОНР НИНа В БВ Ср НН Ба, 
вл Ты Бооенны това зыбь а ке Мы би НВ Ва еь кое с ата, нае 
т Вы анаЫв, РЫЙ Веожг 
Ре ТТ ати, ВЫ ие ка А каре еб ЗА 
Энен роб ро Ня сое ФОРРЕЕ ть От, ВЫ Фо БЕ ма НЗаНь ва ть вап. И 
Чо Нан о уе о рт ПеплЯ ВО тень ый А у Бы анны ОН, ай рые 
Той быт 1, КР Не ее вор № РОВ 

а аоЁ ПА рону длетьй ен есь, Роааный Григ сын ектф. Иани Бы 
Л ВА 


| роеаыре ыы ай а осы, 


О ИЕ 
эт рериаск Гоби, Пете] в Не, ВРе Ыб НИ ва Пе еее, ли ны ВБ 
ВЫ Роба жЕю кои Те тебе а Рае Сори Батыя све бесий о Пир Уре ЮЖ 
а 


Бала деднео И ИловарИ Бр а а р-он. 


Банный сне аа № ава 


Дизайнер Марк Трудель (Магс Ттиде!) 


млм\!.с$52епдаг4епт.сот/094 


Арт Деко 


Минимум графики, максимум воздействия 


Приступая к работе над новым дизайном, 
Марк Трудель следует некоему ритуалу. 
Сначала он заходит на сайты, которые вдох- 
новляют его, примерно час рассматривает 
чужие работы и подбирает контент: фото- 
графии, иллюстрации, текст. Затем откры- 
вает АдоБе Рвоюз$Вор, где готовит мини- 
картинки (итфпай$). В отличие от многих 
художников-графиков, он нелюбит бумаж- 
ных эскизов, считая, что им не хватает уров- 
ня детализации, достижимого в РАоюзвор. 


В началезимы 2004 года Грудель нарушил этот 
ритуал, поскольку в то время гулял по улицам 
Майами. Рептив, что здания в районе Саут Бич, 
выстроенные в стиле Арт Деко, — прекрасная 
модель для абстрактной фотографии крупным 
планом, Трудель сделал множество снимков, 
один из которых лег в основу чистых и све- 
ЖИХ ЛИНИЙ работы, представленной на сайт 
($$ (еп Саг4еп. 


Новый образ мышления 


Новый образ мышления 


Когда дело доходит до работы с графикой в контексте 
С55, от дизайнеров «старой школы», привыкших со- 
ставлять веб-страницу из кусочков, требуется научить- 
ся думать по-новому. Для читателей, никогда, по счас- 
тью, не сталкивавшихся с методом «мозаики», поясним, 
что в этом случае дизайнер тотовит макет в РАо{озВор, 
затем разрезает картинки на кусочки и помещает их в 
НТМГ-таблицы, которые образуют на странице сетку. 


Такой подход естественно преобладал в веб-дизайне 
на протяжении большей части 1990-х годов (рис. 1). 
Увы, эта практика не отмерла и сегодня, что тормозит 
прогресс и наносит ущерб доступности и функцио- 
нальности, 


Один из редко обсуждаемых недостатков метода мо- 
заики — это его ограниченные возможности, в особен- 
ности относительно трафики. Нужно, чтобы каждый 
кусочек изображения точно укладывался в ячейку сет- 
ки, представляющей собой набор прямоугольников. 
Мягко говоря, это мешает дизайнеру в полной мере 


Рис. 2 + Дизайн «Арт Деко» — открытый и воздушный. к | 

Хотя с помощью таблиц сверстать такую страницу тоже можно, = Раскрыть свой творческий потенциал. Поэтому у мно- 

но, скорее всего, раньше это никому не пришло бы в голову гих и многих дизайнеров вошло в привычку создавать 
излишне геометричные макеты. 


Применение С$5 в качестве инструмента верстки сни- 
мает многие подобные ограничения. Конечно, и в С55 
все основано на модели прямоугольных областей, от 
этого никуда неуйти, но есть и различия. Работая с таб- 
лицами стилей, вы можете мыслить в терминах сетки, 
а можете и забыть о ней, Проявив изобретательность, 
дизайнер может вырваться за пределы сетки и предло- 
жить более текучий, открытый дизайн (рис. 2). 


Не будучи связан таблицами, дизайнер может подойти 
к холсту, недумая заранее об ограничениях. И благода- 
ря этому изображения теперь используются совсем 
иначе, чем раньше, что дает прекрасные результаты. 


Жесткие сетки, так затруднявшие работу дизайнера, 
остались в прошлом. С$$ позволяет прикрепить изоб- 
ражение к любому элементу в качестве фона, что, в 
свою очередь, дает возможность организовывать слои, 
перекрытие и- при наличии хороптего браузера- даже 
пользоваться прозрачностью формата РМС для созда- 
ния целого ряда визуальных эффектов. 


Технология С55 не только позволила дизайнеру рас- 
крыть свой творческий потенциал, но и предложила 
способы уменьшения веса страниц, к вящему удоволь- 
ствию пользователей, 


Разумные подходы 
к работе с графикой 


Чистые, открытые линии «Арт Деко» учат нас, в частно- 
сти, тому, как следует подходить к работе с графикой при 
использовании таблиц стилей. С$$ позволяет иначе 
взглянуть на создание и размещение изображений. 


Размер и вес изображения 


Картинки должны весить как можно меньше, но не 
в ущерб зрительной целостности. Метод разреза- 
ния, применявшийся в эпоху табличной верстки, 
способствовал, в частности, сокращению общего 
веса страницы. 


Однако таблицы стилей позволяют разместить по- 
нравившееся вам изображение точно в нужном мес- 
те. В некоторых случаях мы берем более крупную 
картинку, в других — размером поменьше, а иногда 
выстилаем большую область совсем крохотными 
изображениями. 


Взгляните на основную фотографию, образующую 
фон «Арт Деко». На ней изображены облака и харак- 
терные формы здания. Именно эта часть дизайна со- 
здает впечатление легкости и воздушности, но, рас- 
смотрев фоновую картинку в деталях, мы будем 
немало удивлены размерами (рис. 3). 


Размер изображения составляет 788х497 пикселей. 
Представители старой школы разрезали бы его на не- 
сколько частей (если дизайнеру вообще пришла бы в 
голову мысль так оформить страницу). 


Все изображение весит 45,02 Кб; в табличной верстке 
считается, что это слишком много. Но напомним, что 
С5$ предлагает другие подходы к использованию гра- 
фики, поэтому такой вес основного фона не покажется 
чрезмерным, если прочих картинок мало и размер их 
невелик. Следующим по «массивности» идет изображе- 
ние с заголовком, которое весит всего 3,28 Кб и имеет 
более привычный размер 266х103 пикселя (рис. 4). 


Рис. 3 + Главное фоновое изображение в «Арт Деко» 


Рис. 4 + Прозрачный СЁ, взятый в качестве картинки с заголовком 


Подходы кр 


Число изображений 


В дизайне на основе С5$ число изображений не обяза- 
тельно должно быть меньше, чем в традиционном 
табличном макете, но и с меньшим количеством вы 
можете достичь более впечатляющих результатов. 
В табл. 1 описаны все картинки, использованные в 
«Арт Деко» с указанием размера и веса. 


Таблица 1 + Использование картинок в «Арт Деко» 


ПРИМЕЧАНИЕ 


Конечно, современные утилиты для сжатия графики позво- 
 ляют получать файлы меньшего размера. В «Арт Деко» вес 
основного изображения можно было бы значительно умень- 
шить без заметной потери качества. Но поскольку эта фото- 
графия является центральным элементом дизайна и так зри- 
мо доминирует в визуальном пространстве, то автор имеет 
право пожертвовать весом ради достижения более яркого 
впечатления, 


Так как же уменьшить число используемых изобра- 
жений и сократить тем самым вес страницы? Одна из 
целей данной главы — побудить вас мыслить о графи- 
ке более широко, и ответ на этот вопрос будет непло- 
хим началом. Есть несколько способов сократить по- 
требность в графике, а именно: 


+ всюду, где возможно, пользоваться стилизованным 
текстом вместо картинок. В «Арт Деко» так делается 
в заголовке и подзаголовке страницы. Для получе- 
ния типографских эффектов действительно приме- 
нена графика, но непосредственно под ней располо- 
жен обычный текст (из раздела ча1скбипщагу). 
Соблюдение такого рода баланса может оказаться 
очень полезным; 


+ брать только ту часть картинки, которая необходи- 
ма для достижения желаемого эффекта. Нагляднее 
всего это проявляется в использовании основной 
фоновой фотографии и заголовков, которые и при- 
дают всей странице зрительное очарование; 


+ пользоваться очень тонкими изображениями для 
заполнения фона. Фон части документа, располо- 
женной под основной фотографией, залит картин- 
кой Ба_Ъ1ие1 .91Е, высота которой всего 1 пик- 
сель, а весит она жалкие 140 байтов; 


+ повозможности используйте изображения повтор- 
но. В умело построенной таблице стилей одно и то 
же изображение можно связать со многими элемен- 
тами. В «Арт Деко» картинка 1191 51ще.91Еслу- 
жит фоном для трех разных элементов, но при этом 
задано только одно правило, которое с помощью 
селектора потомков применяется ко всем элемен- 
там \11 внутри раздела 11115: 


#1 ]2КЫ1ееЕ м1 { 
магалп: Орх;: 


| 


м вм С Тм 
пы 1: т] Г Е\ 
1: = МП 511. =] АС О ГЕ 1 г] 
м Л т ды а ИИ 


рааа1та: 0рх; | 
гереае-у; 


БасКагоипа-гереае: 


} 

+ не забывайте об обычной заливке цветом. Если 
нужного эффекта можно добиться с помощью 
свойства со1ог или Баскагоцпа-со1 ох, не 
пользуйтесь изображениями. 


И наконец, если картинка лишняя, выбросьте ее. 
У дизайнера всегда возникает сильное искушение 
вставить избыточную графику. Спросите себя, каж- 
дая ли картинка на странице имеет какое-то назна- 
чение, эстетическое или функциональное. Если от- 
вет неясен, подумайте, не стоит ли от этой картинки 
избавиться. 


Слои графики 


Еще один вопрос, которым редко задавались до реа- 
лизации поддержки С$$ в браузерах, — это организа- 
ция нескольких слоев графики для создания тех или 
иных эффектов. Сегодня это вошло в плоть и кровь 
дизайнеров, но раньше размещение одного изображе- 
ния поверх другого практиковалось редко. 


Встречался такой метод разве что при использовании 
прозрачного СТ поверх фона или цвета, указанного 


Рис. 5 + Наложение прозрачного изображения на фон, 
в духе старой школы 


Максимальное воздействие 


для БоЯу или саЪТе, В этом случае в теге Бо@у зада- 
валось фоновое изображение или цвет для всей стра- 
ницы, например: 


<БоЯу Б9с01о0ог="#3366СС" БасКагоцпа=" 1паде/ 
Ь9.)ра"> 


Затем где-то внутри тела страницы, чаще всего в ячей- 
ке таблицы, размещалась прозрачная картинка: 
<Еа><1та вгс="“1падез/сазсепдагаеп. 91" 


утаен="266" Нелан="103* 
а1=*С55 теп Сагаеп"></е4> 


В результате получалось что-то похожее на фрагмент 
рассматриваемого дизайна, изображенный на рис. 5 


В «Арт Деко» Трудель использовал основную фото- 
графию как фон для элемента #сопса1пег: 
#сопса1пег { 


не то 
`ТеЕс Бору. тм А ИВ к у: НЕ А г У ВЕ 


и 


Затем он связал прозрачную картинку с селектором 
праченеаег П1: 


„Траденеааегь В1. 
РА Баскатовоа: заза '41Е) 
Ес Сор РЕ 
мтаЕн: 620рх; 
лезаНе: 103рх; 


} 


В результате получится приятный для глаза заголовок. 
Хотя визуально он выглядит так же, как комбинация 
графики и цвета фона на рис. 5, но процесс получе- 
ния эффекта совсем иной. 


Максимальное 
воздействие 


В «Арт Деко» для создания свежего решения исполь- 
зуется не очень много графики, Добавьте к этому изоб- 
ретательное размещение картинок, тщательно проду- 
манный баланс между типографскими эффектами, 
достигаемыми за счет графики, и текстом, а также про- 
стое, но повсеместное применение изображений и тек- 
ста для обеспечения нужной цветности, -— и вы полу- 
чите дизайн, в равной мере технически оснащенный, 
впечатляющий и неограничивающий творческую сво- 
боду автора. 


*- з 
И ИЗ 


о авы | 


| т ал «Я подеавый р. ея плиты „р Рфы_ ТР, ВЯ 


паерения вены В Я в те Фрол. Пя шабу ан ВАН, 


В РР МЕ ви "РБ ве  пРоеоя 


4 Рагйсраной 


ен 


Вы ар Чи о р . не ры я, р 
НЗ Я ра в ор БЕНЦ РР Не БЫ Ты ее МЛЯ НН Я Рыани, ТЫ 
ны ао 


Та ааены Па раезеаы Виный Ви НБ ЧА атеЫ СИЕ Л РЯ нь, ОБА рен Рвня 

ПЕ РЕ НЫ БИЯ Ачит. ЗБ Е В же не БрБеы бы 55а бе Ва + 5В 
о А 
Ни ци мыл: дан БЫ АВЕ ан В Я дисты ы а ВЫ. 


Вепей 5 


В НД ЫЬЫ аи НИ в ВСВ ЫЕ бы ат оВ ва ИА Е НН ыы ра 
Нани т СИТ ланы д РЕ ее ов ден Зал ВА В ев РЫБ 
т ВЕ азарт Бе Ве ба Е рана НЬЮ а В НЫЫ Ш Ее Вы ору 
и я пот. 


Ведштетиетги 


и Ч 


в: 
О № я аа и ия 
а 
Я тая Г Фо. 


НЕЕ о ев рыб тии 3 выч рориеаан ня ий А 


Бан ыыРы Не ани, 
Нан Че в Ве, БЫ ь В ва, пад рее 
Бы 


В Е 
нить ыыы ды НЯНИ 

сие в. я 

==. 

ЕТ фуаоаны в Нат То Раны ТБоьвинь. Г ьбиии олоет. а В маья, ба нее, 


пл пы за Ч ма 


= 


Дизайнер Михал Мокржицки (М1сПа( МоктхусК1) 
мимим.с$52епдагдеп.сот/097 


Без границ! 


Долой прямоугольники, 
да здравствуют скругленные изображения! 


Преобладающая тенденция в дизайне на ос- 
нове С55 —это центрированная, фиксирован- 
ная верстка и предсказуемые тени. Именно от 
этой тенденции Михал Мокржицки решил 
отойти в своей работе «Без границ». Он оста- 
новился на расширяемом трехколонном ма- 
кете во всю ширину окна. Дизайн должен был 
быть максимально простым, но в то же вре- 
мя элегантным и своеобразным. 


В отличие от многих дизайнеров, строго сле- 
дующих процедуре, Мокржикцки часто пола- 
гается наимпровизацию. Начал он с просмот- 
ра своей коллекции фотографий, а потом 
переходил от АдоБе РНо{юзВор к С5$ и обрат- 
но, стремясь воплотить возникшие идеи в 
жизнь. Работая над этим дизайном, Мокр- 
жицки осознал, что С$5 предлагает безгра- 
ничные возможности для выхода за пределы 
«прямоугольной модели», потому-то он и 
назвал свое творение «Без границ». 


Рис. 1 + Избыток прямоугольников на ранних стадиях развития \\Меь 


ВЯ вЕоья Па ВЕЗы ТЫС одлриЬ в прыетый и рф СИ юри МГ, 
Май ффзеечны Ише ПБ ТУРЫ. 
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Рис. 2 + Пример ранней верстки на основе С55: действительно, 
прямоугольников слишком много, но для своего времени это 
было новаторством, поскольку зрительно воспроизводилась 
популярная на тот момент НТМЕ-верстка 


ПРИМЕЧАНИЕ 


К счастью, по мере развития технологий веб-дизайнеры на- 


ики»: когда картинки режутся на части, помещаемые затем в 
ячейки таблицы. Со временем был выработан и более проце- 
дурно-ориентированный подход, приведший к новым визуаль- 
ным тенденциям, но «прямоугольность» все же присутствова- 
ла, поскольку в \\еБ не было другого графического интерфейса. 


учились придавать форму табличному макету методом «моза- | 


Проблема прямоугольников 


Проблема 
прямоугольников 


Совсем неслучайно дизайн для У\еЬ исторически сло- 
жился «прямоугольным». И какая ирония заключена 
в том, что именно дизайн на основе С55 особенно ча- 
сто обвиняли в этом грехе! Притом именно таблич- 
ные макеты, для которых характерно активное при- 
менение границ и отступов, часто выглядели как 
нагромождение прямоугольников, бессистемно раз- 
бросанных по поверхности страницы (рис. 1). 


Еще вспомните, что в те времена большинство персо- 
нальных компьютеров оснащались мониторами с раз- 
решением 640х480 пикселей — совсем немного по срав- 
нению с тем, что мы имеем сейчас. Добавьте к этому 
основанный на прямоугольниках интерфейс самого 
веб-браузера и форму компьютерного экрана. Вот и 
получится прямоугольник внутри прямоугольника 
внутри прямоугольника, 


С визуальной точки зрения посетителю было не очень 
удобно разбираться в информации, глубоко упрятанной 
в скоплении прямоугольных областей, Но то была эпо- 
ха головокружения — Всемирная паутина только появи- 
лась, и очарование ее было столь велико, что и создате- 
ли страниц, и зрители готовы были простить многое, 


Разумеется, когда для создания визуального представле- 
ния стали применять технологию 55, прежде всего по- 
пытались на новой основе воссоздать старые, уже при- 
вычные типы верстки. В ранних макетах преобладала 
структура с несколькими колонками, к которой легко 
было применять декоративные элементы вроде границ. 
Именно поэтому наранниеработы обруптился град кри- 
тики за изобилие прямоугольных форм (рис. 2). 


Неправильно было бы сказать, что С5$ несет основ- 
ную долю ответственности за «проблему прямоуголь- 
ников». По мере того как наше понимание С$$ стано- 
вится более зрелым, применяются все новые и новые 
способы работы с графикой, особенно с фоновыми 
изображениями для элементов, для создания много- 
слойных форм, орнаментов и других украшений, по- 
зволяющих выйти за границы прямоугольных маке- 
тов прошлых лет. 


154 В: 


афика 


В дизайне «Без границ» применяются скругленные 
углы и круговые элементы декора, позволяющие уб- 
рать угловатость, присущую прямоугольной верстке, 
и смягчить общее впечатление от страницы. 


Да здравствуют изгибы! 


В работе «Без границ» есть много примеров того, как 
можно добавить изгибы и скруглить формы, чтобы 
они не казались слишком прямоугольными, Для это- 
го так или иначе используются фоновые изображения. 


Простые изгибы: 
одно фоновое изображение 


Самый очевидный способ нарушить «прямизну» — 
создать единственную картинку, содержащую все кри- 
вые и контент. Затем она связывается с некоторым 
элементом посредством таблицы стилей. 


«Без границ» демонстрирует применение такого ме- 
тода. У заголовка ТВе Коаа 10 Еп!еМептеп{ приятно 
скругленный правый край (рис. 3). 


Затем это изображение было присоединено к элемен- 
ту №3 в разделе #ргеамЫ1 е: 


ВезаНе: 37рх; 
маха1п-Боееом: 10рх; 
рааа1та: 0; 

} 


Но что делать, если вы хотите наложить такую непря- 
моугольную картинку на другой фон? 


Составное фоновое 
изображение 


Сделать страницу более интересной можно, восполь- 
зовавшись фоновыми изображениями, присоединен- 
ными к нескольким элементам. При этом создается 
иллюзия многослойности, а картинки остаются не- 
большими по размеру и весу. 


В дизайне «Без границ» такая техника применяется в 
заголовке С55 еп Саг4еп, у которого скруглен пра- 
вый нижний угол, а под ним открывается фон с диа- 
гональными полосками (рис. 4). 
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Рис. 3 + Скругленный графический заголовок из дизайна 
«Без границ». Обратите внимание на прозрачность правого края 


ПРИМЕЧАНИЕ 


Значение сгапзрагепеЕ позволяет другим изображени- 
ям и цветам проступать сквозь прозрачную часть данного 
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Рис. 4 + Заголовок со скругленным правым углом кажется 
наложенным на полосатый фон 


— === Дазаравевуютизибый 8 


Чтобы достичь такого эффекта, Мокржицки сначала 
поместил на страницу картинку с полосками (рис. 5) 
в качестве фонового изображения, присоединенного 
к элементу Боау: 

БоЯу { 

ЕопЁе: эта]11 "ТгеБасНее М5", уегтдава, Агта1, 

Не1уеЕ1са, запз-зег1Е; 
со1ог: #676767; 
мага1п: Орх; 
рааа1па: 0Орх; 


Баскакоцпа: ккапзрагепе иг] (Боду_Баск.рпа) 
по-гереаЕе сор 1еЕс; 
} 


Затем к элементу #сопеалпег он присоединил изоб- 
ражение со скругленным углом: 
#сопса1пех { 


рааЯ1т9: 0рх; 
шага1п: Орх; 


Концептуально, два фоновых изображения теперь 
перекрывают друг друга, и выглядит это как прямоу- 
гольник со скругленным углом на фоне полосок. Дру- 
гой пример такого рода можно наблюдать в правом 
верхнем углу страницы, где заголовок списка ссылок 
размещен на фоне тех же полосок (рис. 6). 


Оформление углов 
области контента 


Основываясь на идее слоев, можно скруглить несколь- 

ко углов у области контента или добиться других эф- 

фектов. Но фокус в том, что для этой цели потребует- 
Рис. 5 + Тонкая картинка повторяется вдоль оси х, образуя фон <Я несколько элементов в НТМЬ-разметке. 


элемента воду Примером могут служить разделы #раденеааег и 


#чо1скбиимаку в дизайне «Без границ». В результа- 
те текст оказывается внутри области со скругленны- 
ми нижним и верхним углом (рис. 7). 


Без применения С$$ понадобилось бы одно или не- 
сколько изображений, упакованных в таблицу. С$5 же 
РИА ИИ И позволяет создать только изображения для получения 
Рис. 6 + Еще один пример эффекта двухслойного фона эффекта скругления и применить стили к НТМГ-тек- 
сту, уменьшив тем самым общий размер картинок. 


, резка Рскир Ё 


Для этого Мокржицки создал два изображения: одно для 
верхней части (рис. 8) и другое — для нижней (рис. 9). 


Затем они были присоединены в качестве фона к эле- 
ментам Н2 в разделах #радеНеааех и #аа1скЗиштагу 
соответственно: 

#радеНеайег { 

ро51Е1оп: аБзо]щее; 

ТеЕе: Орх; 

сор: 190рх; 


итаен: 291рх; 
159рх; _ 


_Везаве: 


2-1паех: 3; 

} 

#раченеааек 12 |{ 
22816101: абзоцие; 
и. Вил 


Е ао: 


ВезовЕ: 135рх; 
пага1п: 0; 
рааа1пч: 0; 


Но сэлементами #раденеааехг №1 и #аа1сКбилтаху 
не связано никаких изображений. Вместо этого они 
позиционированы, для элемента В 1 задан цвет фона, 
а текст в НТМ!-разметке стилизован: 


пене ы ИИ 


Бор: БЭрх; 


РУ аскКс рог ие ты ОС! 


Богаег-ктаНне: Е 14а т 
\таЕНн: 289рх; 

ВезанНс: 150рх; 

мага1п: 0; 

рааа1т9: 0; 

} 


о скеиваху 3 | 


| Бор: 27 брх; 
ТтеёЕ: 20рх; 
чтаЕр: 245рх; 
11пе-везанс: 2; 
=-1паех: 3; ы ! 


} 


заитскбшитагу р { 

со1ог; #ЕЕЕ; 

Еопе-з12е: 11рх; 

11 пе-Везоне: 1.5; 

Еопе-Еат11у: Уегаапа, Аг1а1, Не1уеЕ1са, 
ве’: Е; 


} 


Бапё- 


Рис. 7 + Фоновые изображения, присоединенные к нескольким 
элементам, образуют область, внутри которой выводится текст 


ь 


| ГАе Веаци, 


Рис. 8 + Верхнее изображение, содержащее графический текст 


РР 


Рис. 9 + Нижнее изображение. Обратите внимание 
на прозрачные части обоих изображений, их выдает 
проступающий клетчатый фон 


ПРИМЕЧАНИЕ 


Идея многослойного фона лежит также в основе более слож- 
ных приемов, например, описанных в статьях Дугласа Боумена 
«5 тд Воог$ о $5» (улмм/.ай ара", сот/асе$/$падоогз 

и млм. ай$фара“.сот/агйсе/$1т19000г52), 


Скругленные изображения 


ПРИМЕЧАНИЕ 
Много мыслей по поводу аналогичных подходов к получению 
различных угловых эффектов вы найдете в статье Серена Мад- 
сена (5огеп Мад5еп) «($5 0ез1дп: СгеаНпа Си$от Сотпег$ апа 

Вогаегз» (улим/.ай${араг.сот/агяцез/си$отсогпег). | 


Обратите внимание на высоту, заданную } для разделов. 


= м“ 


Это позволяет избежать перекрытия и переполнения. 


Нестандартные маркеры 


Этот прием также подразумевает присоединение фо- 
нового изображение к элементу, в данном случае к 
элементу 11. Круглые графические маркеры хорошо 
укладываются в основную тему дизайна «Без границ» 
и дают пищу для размышлений тем дизайнерам, ко- 
торым интересно, как создается графическое оформ- 
ление, интегрированное с общей концепцией (рис. 10). 


Для создания полного набора маркеров для своей ра- 
боты Мокржицки сначала подготовил три разных 
изображения. Первое — светло-зеленое — нужно было 
для выделения основных ссылок; второе — голубое — 
для ссылок на архивы; третье — красновато-коричне- 
вое — для ссылок на ресурсы. 


Затем изображения маркеров были присоединены в 
качестве фона к конкретным элементам: 
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© Ттап Лао другие краевые эффекты, чтобы уйти от всем надоев- 


ших прямоугольных форм, техника присоединения 
изображений к элементам поможет придать странице 
свежий, неповторимый облик. А дополнительные 
формы сделают визуальные эффекты еще более вы- 
разительными, как в дизайне «Без границ». 


Рис. 10 + Список ссылок с нестандартными маркерами 
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Дизайнер Дэйв Ши (Вауе $Неа) 
им. с5$2епдаг4епт.сот/013 . 


Береговой ориз 


Подготовка графики для работы 
и поиск дополнительного исходного материала 


- =. ее 


Житель Ванкувера и известный писатель Дуг- 
лас Коупленд (Роц#а; Соирап9) назвал свой 
родной город городом из стекла, Он приволь- 
но раскинулся у подножья горного хребта на 
западном побережье Канады. Навеянная мо- 
рем тема с плавником и раковинами, допол- 
ненная несколькими осколками стекла, могла 
бы еще больше ассоциироваться с городом, 
если бы добавить несколько порций супти. Но 
дизайнер Дэйв Ши знал, где остановиться. 


Графические образы, использованные в «Бе- 
реговом бризе», были нарисованы вручную 
в АдоБе РБо\озВор, никаких предварительно 
отснятых фотографий не было. Пользуясь 
различными инструментами, имеющимися в 
РВо{юзВор, Ши сумел воспроизвести живо- 
писные текстурированные эффекты, не при- 
бегая к фотографиям. 


Рис. 1 + Оригинальный, созданный в Рпоюзпор файл, 
положенный в основу «Берегового бриза» 


Рис. 2 + Для осколков стекла создана прозрачная тень 


Технические приемы 


Отправная точка 


Основные объекты были когда-то созданы для давно 
уже почившего в бозе сайта, созданного задолго до еп 
Сагаеп. Вернувитись к оригинальному, созданному в 
2001 году с помощью РиоозПор файлу, состоящему 
из 300 с лишним слоев (рис. 1), Ши выбрал из него 
элементы, необходимые для нового дизайна. Адапти- 
ровать графику оказалось сравнительно просто; про- 
блема состояла в том, чтобы создать макет, в который 
удачно вписался бы текст. 


Исходный дизайн представлял собой почти квадрат- 
ную область, размеченную с помощью НТМТ, а текст 
на сайте еп Саг4еп довольно длинный, поэтому вер- 
стка должна быть вытянута по вертикали. Предстоя- 
ло как-то разрешить эту неувязку. 


В качестве отправной точки у Ши была квадратная 
область. Оказалось, что приспособить ее к идее «Бере- 
гового бриза» проще всего, разрезав квадрат пополам 
и растащив верхнюю и нижнюю половины. [.-образ- 
ные уголки эффектно обрамляют страницу, оставляя 
необходимое пустое пространство. 


Технические приемы 


Конечно, не каждый будет рисовать весь дизайн вруч- 
ную, но некоторые приемы, примененные в «Берего- 
вом бризе», могут оказаться полезными и в более 
широком контексте. Доработать существующее изоб- 
ражение или добавить визуальные штрихи проще, 
когда вы владеете необходимыми навыками. Описан- 
ные ниже приемы ориентированы на редактор Адофе 
РВо{озВор. Поскольку необходимые инструменты ри- 
сования есть во многих графических программах, то 
вы, скорее всего, сможете воспользоваться этими ме- 
тодами и в своем любимом редакторе. 


Использование кистей 
и преобразований 


Осколки стекла в правом верхнем углу страницы от- 
брасывают тень и кажутся прозрачными, как будто 
сквозь них просвечивает солнце (рис. 2). Чтобы дос- 
тичь такого эффекта, нужно несколько больше, чем 
просто наложить имеющийся в Р‚о{о5Вор теневой 


слой. Впрочем, ненамного больше. Начнем с дубли- 
рования образа на переднем плане (выберите из меню 
Гауег —» ОирНсаме Гауег), в данном случае твердого 
стекла. Расположим новый слой под исходным и за- 
льем сплошным цветом. С помощью команды ЕРгее 
Тгапзюгт (Ед и -› Егее Тгапзюгт), позволяющей ра- 
стягивать, сжимать, поворачивать и перекашивать гео- 
метрические фигуры, тень была сжата по вертикали, 
скошена влево, после чего размыта, чтобы сгладить 
внешние края (рис, 3). 


Чтобы сделать тень прозрачной, потребуются инстру- 
менты Егазег (ластик) и Зтпиа$е (растушевка). Тот и 
другой можно настроить, сделав больше или меньше, 
с мягкими или твердыми краями. Чтобы вручную сте- 
реть среднюю часть тени, была взята крупная кисть с 
мягкими краями; затем к результату была применена 
небольшая растушевка тоже с мягкими краями, что- 
бы сделать тень слегка неправильной (рис. 4). Идеаль- 
но правильная тень, конечно, выглядит красиво, но в 
жизни объекты редко бывают безупречными, так что 
без дополнительной проработки деталей они будут 
казаться нереалистичными. Для завершения эффекта 
пришлось еще слегка подпортить поверхность исход- 
ного объекта (рис. 5). 


Использование инструментов 
Вигп и боаде 


Для реализации многих штришков можно было бы 
обойтись только ластиком и растушевкой, но вряд ли 
вы захотите ими ограничиться. Добавить тень или 
выделение к любому графическому изображению не 
очень трудно благодаря соответственно инструментам 
Вигп (затемнитель) и Ро4ре (осветлитель). В качестве 
основного слоя был взят лист, залитый одним цветом 
(рис. 6), с помощью осветлителя были нанесены свет- 
лые прожилки. Дополнительную глубину им может 
придать затемнитель, с помощью которого наклады- 
ваются легкие тени. 


Сетка прожилок на поверхности однотонного листа 
выглядит неэстетично, поэтому с помощью затемни- 
теля привнесены дополнительные оттенки, чтобы под- 
черкнуть трехмерность (рис. 7). 


Вышеупомянутые инструменты использовались для 
создания листьев лозы. Достаточно сделать копии ис- 
ходного листа, а затем повернуть их и изменить раз- 
меры. Добавив саму ветвь и еще немного поработав 
над выделением и тенью, мы добились полной иллю- 
зии (рис. 8). 


Рис. 3 4+ Исходная форма со сплошной тенью, скошенной, чтобы 
создать иллюзию, будто она отбрасывается трехмеоным телом 


Рис. 4 4+ Отбрасываемая объектом тень сделана прозрачной 
с помощью ластика и растушевки 


Рис, 5 + Окончательный вариант с дефектами, добавленными 
для пущего реализма 


Рис. 6 + Исходная поверхность листа 


Рис. 7 + Для имитации прожилок и текстуры добавлены тени 
и выделения 


ПРИМЕЧАНИЕ 


Цветной вариант рис. би 7 см. на вкладке. 


Рис. В + Лоза вместе с листьями 


СОВЕТ 
Рекомендуем книгу Ре*ег К. Випап «Мазеппд 019Ка( РпофодгарНу 


апд Ттадтпод» (5уБех, 2004). 


6 Зак. 1942 


Покупка изображений 


Возможно, вы заметили, что по мере уменьшения раз- 
мера листьев прожилки пропадают; когда масштаб 
изображения уменьшается, детали становятся неразли- 
чимыми. Но важно отметить, что глаз все же распозна- 
ет многие мелочи, а общее впечатление усиливается 
даже от незаметных, на первый взгляд, визуальных 
ключей. Бывает очень обидно уменьшать масштаб хо- 
рошо и детально проделанной работы, возникает есте- 
ственное желание оставить ее такой, как есть. 


Создание графических 
образов 


Хотя не каждый может позволить себе потратить день- 
ги или время (а это много часов) на прорисовку изоб- 
ражений вручную, как в «Береговом бризе», тем не 
менее это один из способов подобрать картинки, не- 
обходимые для дизайна. 


Обращение к традиционным графическим искусст- 
вам — это, быть может, самый очевидный способ со- 
здания изображений. Хотя рисование и живопись не- 
часто применяются в процессе разработки целого 
сайта, но многие дизайнеры сначала делают эскиз идеи 
на бумаге и только потом опускаются до уровня пик- 
селей. Иметь под рукой архив рисунков, фотографий 
и иных материалов может быть полезно, когда вы ус- 
танете от обычных источников, В конце концов, в бу- 
дущем вы сможете почерпнуть из них вдохновение, 
если они уж больше ни на что не пригодятся. 


Таланты бывают разные, в наши дни дизайном для У\еБ 
занимаются люди с различным образованием и навыка- 
ми. Если вы не умеете рисовать, то, скорее всего, у вас 
есть другие возможности для добывания нужных кар- 
тинок, Благодаря развитию технологии (и падению цен), 
с помощью дешевого сканера и цифровой фотокамеры 
можно получить высококачественный исходный мате- 
риал, если только вы знаете, как этими устройствами 
эффективно пользоваться. Возможно, к устройству даже 
прилагалось руководство, но если вы хотите действи- 
тельно познакомиться с основами, то имеет смысл по- 
читать какое-нибудь введение в цифровую графику. 


Покупка изображений 


Конечно, ограниченность бюджетов, выделяемых на 
дизайн большинства сайтов, не позволяет платить за 
изображения, сделанные на заказ, хотя клиенты с тол- 
стым кошельком и могут оценить, насколько допол- 
нительное внимание к теме и композиции окупается. 


Работа на заказ 
и приобретение 
без отчислений от продаж 


Чтобы найти местного фотографа или иллюстратора, 
придется покопаться в «желтых страницах», но часто 
лучших результатов можно достичь, общаясь с дру- 
гими местными творческими личностями по сети. 
Впрочем, нет нужды ограничиваться только местны- 
ми талантами, существует множество сайтов, на ко- 
торых клиенты могут договориться о работе с профес- 
сионалами. Один из самых известных - это Адчет 
(мгмгиг адиен(.сота), но есть и немало других, работаю- 
щих более или менее эффективно. 


Работа на заказ стоит дорого, и немного найдется сай- 
тов, которые могут себе это позволить. Есть и более 
простой путь — посетить магазин готовых фотогра- 
фий, где можно приобрести желаемое без отчислений 
от продаж. Это означает, что вы платите за изображе- 
ние только один раз, а потом можете использовать его 
в любых целях при соблюдении условий лицензии. 
Лицензия, как правило, позволяет делать все, что угод- 
но, кроме перепродажи, так что раз купленное изоб- 
ражение можно вставлять в разные проекты. Правда, 
в магазин может зайти кто угодно, так что есть риск, 
что «профессиональная деловая женщина» из вашего 
последнего шедевра на другом сайте будет представ- 
лена как «физиотерапевт». Такое бывает. 


Если бюджет не позволяет обратиться в магазин изоб- 
ражений, то зайдите на сайты, где исходный материал 
можно получить бесплатно. Давая фотографам и ил- 
люстраторам-любителям возможность делиться 
друг с другом своими творениями, сообщества типа 
15оскРВо‘о (мгу 1$юскрНого.сотп) (рис. 9) и зюск.хобпе 
(угилии.зхс.Пи) создали впечатляющие каталоги фотогра- 
фий и рисунков со средним и высоким разрешением, 
которые широко распространяются в У/еБ. Некоторые 
изображения продаются за небольшую цену, другие 
вовсе бесплатны, но так или иначе полезность таких 
сайтов неоспорима. 


Чена "Ве и ма 
ЕБадеиниеи 5 ве РН ат ен НЫ В рее 
Пса ьыта сть 


| Нан рая ие мыша 68 


сеееиси БОВ ан 


ры еощь пл оеакь [| ва -- 


чеЕь" |0 Резре- Мор Ре Ченевиь- 2 аа ое АВ 


ЗШИМЕЕ ВИМОТЕ 
ТВИН 


} БО КРОТ О 
УИ ЩНВЕ т ГУ ТЕ 


Рис. 9 + Сайт 'З!оскрпою приглашает художников поделиться 
своими работами 
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Рис. 10 + На сайтах типа Стеабуе Соттопз предлагаются 
произведения искусства, являющиеся всеобщим достоянием 


Покупка изображений 


Поиск альтернативных 
источников | 


Если вы готовы раскинуть сети поптире, то’ можно 
найти и другие источники ‘изображений без отчис- 
лений от продаж. В некоторых странах закон об ав- 
торском праве распространяется на несколько прошлых 
десятилетий, но обычно момент, когда произведение 
искусства становится общественным достоянием, от- 
стоит от момента его ‘создания не слишком далеко. 
Так, в США в середине 2004 года авторским правом 
уже не защищались произведения, опубликованные 
ранее 1923 года. Открыты для использования были 
также работы, опубликованные в период между 1923 
и 1963 годом, если авторское право не было специ- 
ально продлено. 


Работы, являющиеся всеобщим достоянием, можно 
использовать в любых целях, коммерческих или лич- 
ных, так что если вам нужно изображение, созданное 
давно, то стоит подумать и о таком методе. Чтобы най- 
ти подходящее произведение, достаточно набрать в 
поисковой системе запрос ри с дога. В библиоте- 
ках и художественных галереях есть каталоги обихе- 
доступных творческих работ. В вашей местной биб- 
лиотеке может быть даже составленный там же каталог 
общедоступных фотографий. 


Но вовсе необязательно залезать так далеко в про- 
шлое, поскольку есть проекты, ставящие себе целью 
сделать всеобщцим достоянием и новые работы. Так, орга- 
низация Сгеануе Сопитоп$ (ВИр://сгеаНуесогатлопз.оге) 
«стремится расширить круг произведений искусства, 
доступных всем для совместного использования и 
в качестве основы для новых работ» (рис. 10}. Хотя 
в 2004 году основной задачей сайта было убедить ху- 
дожников делиться своими произведениями, вы 
найдете там работы, опубликованные на условиях 
лицензии Стеапуе Сопитоп$. Впрочем, пользуйтесь 
ими осторожна, поскольку лицензия предусматри- 
вает различные уровни, и не все можно просто так 
стянуть. 


Замечания 
об авторских правах 


Если работа не выставлена на продажу, но вам она 
абсолютно необходима, то у автора (а чаще у издате- 
ля) всегда можно испросить разрешение на использо- 
вание, В худшем случае он ответит отказом, Позаботь- 
тесь о том, чтобы правообладатель дал разрешение в 
письменной форме, только после этого вы сможете 
пользоваться работой для оговоренных целей. 


Отметим, что законодательство об интеллектуальной 
собственности запутано и часто меняется. Новыетвор- 
ческие работы защищены законом об авторских пра- 
вах с момента создания вне зависимости от того, по- 
местил ли автор знак копирайта. 


Изучите законы, действующие в вашей стране, Если 
вы не полностью уверены, что можете воспользовать- 
ся той или иной работой, получите разрешение или 
примите иные меры. Воспользовавшись без разреше- 
ния работой, защищенной авторским правом, вы рис- 
куете попасть под суд. 
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СОВЕТ 


Система поиска по сайту СгеаНме Соттоп$ доступна по адресу 


ВЕЕр://сгеабмесоттоп$.огд/деесоп{епе. 


СОВЕТ 


Вот несколько полезных ссылок на правительственные ре- 
сурсы, посвященные законам об авторских правах: сайт 
агентства по авторским правам США (\\умм.сорупа НЕ. ом), 
сайт с текстом канадского закона об авторских правах 


(ВЕр:/Лам$ди5Ясе.дс.са/еп/С-42), страница патентного 
бюро Великобритании, посвященная закону об авторских 
правах (ммм. рафеп{. доу. иК/сору). 


Вердикт: нарисованный облик 


Вердикт: 
нарисованный облик 


«Береговой бриз» — впечатляющий пример того, что 
можно сделать, имея капельку таланта и много сво- 
бодного времени. По оценке Ши, на создание графи- 
ки для этого дизайна было потрачено более 80 часов 
работы в РВою$Пор. 


О клиенте, который согласился бы платить за такое 
времяпрепровождение, можно только мечтать. Для 
коммерческого проекта аналогичного результата мож- 
но было бы достичь с помощью фотографии. Пользу- 
ясь подходящими инструментами, удалось бы создать 
идентичную атмосферу, не подрывая бюджет. 


Нарисованные вручную картинки, конечно, отлича- 
ются, но на практике именно бюджет определяет, где 
надо остановиться в работе над проектом. Придавать 
неповторимость сайту лучше за счет деталей и мел- 
ких штрихов. 


Дизайнер Майкл Пик (Мтспае! Руск) 


\имм!.с$52епдаг4епт.сот/019 


Что там в глубине 


Трехмерное пространство на двумерной плоскости 


Играума и ассоциативные образы — именно так 
у Майкла Пика рождаются идеи. В данном слу- 
чае он начал с размышлений об общественных 
парках в Нью-Йорке и отснял несколько фото- 
графий. Обрабатывая их в АдоБе РВо{ю$Вор, он 
вдруг заметил, что получающийся результат 
напоминает муравейник. Это навело его на 
мысль изобразить нетрадиционный наземный 
парк, а некую подземную сцену. 


Приняв такое решение, он стал думать о том, 
чтоеще можно найти под землей. Нахлынув- 
птгий поток образов вдохновил его на созда- 
ние страшноватого, странного, но нелишен- 
ного своеобразной красоты дизайна «Что там 
в глубине». 


ПРИМЕЧАНИЕ 


Технология УКМ(. никуда не делась. Она всееще развивается 
и используется в некоторых ситуациях. Найти информацию 
о версии УВМЕ с открытыми исходными текстами, ОрепУ/ МИ, | 

можно на сайте уммуи.орепугт(.отд. 


ПРИМЕЧАНИЕ 


Подробнее о @мскИте УВ можно прочитать на странице 
миили.арр(е.сот/адшскЯте/ аут, 


ПРИМЕЧАНИЕ 
Исследованию и продвижению открытых стандартов на трех- 
мерную графику для \№еЬ посвящен проект \еЬ30 Сопзопит 
(ммм меб З4.0тд). | 


рехмерной сцены _ 


Создание 
трехмерной сцены 


В большинстве веб-страниц упор делается на том, что- 
бы представить информацию красиво и в удобной для 
работы форме. Хотя от дизайнеров часто требуют но- 
вых и свежих идей, следует признать, что значительная 
доля сайтов по необходимости организуют графику и 
текст на двумерной плоскости. 


Есть и исключения. На очень ранней стадии развития 
Всемирной паутины появилась технология УКМИ 
(Уиа] КеаШу Мо4ейпе Гаприазе- язык моделирования 
виртуальной реальности). Нанося отдельные точки в 
моделируемом окружении, разработчик мог создать 
трехмерную модель для размещения на веб-странице. 
Для просмотра таких моделей посетителю был необхо- 
дим подключаемый УКМГ-модуль. 


Чуть позже компания Арре разработала программу 
ОшсКТите УК, которая позволяла «сшивать» после- 
довательность панорамных фотографий, Для про- 
смотра результата на веб-странице тоже был необхо- 
дим подключаемый модуль. 


Конечно, трехмерные анимации и игры можно про- 
сматривать на веб-странице, если это поддерживает- 
ся самим браузером или подключаемым к нему моду- 
лем, как, например, НазЬ, ЗВосК\У/ауе и модули для 
других аудио-, видео- и смежных форматов. 


Но лишь изредка нам выпадает удача исследовать на 
глубину «родную» для У!еЬ среду -— безо всяких инст- 
рументов для поддержки виртуальной реальности и 
прочих специальных программ. Не ограничивая свое 
воображение двумерной областью, мы можем, как 
Пик, копнуть поглубже и создать более реалистичную 
картину. 

Моделирование трехмерной среды -— это обширная 
область, в которой ведутся сложные научные иссле- 
дования. Неплохой отправной точкой для изучения 
этой темы может стать разработка компьютерных игр. 


Понятно, что по мере того, как игры становятся все 
более реалистичными и зрительно убедительными, 
знакомство с принципами их проектирования может 
многому научить дизайнера. 
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Как устроены детали 


Выдающаяся графика работы «Что там вглубине» так 
сильно поражает зрителя благодаря проработке дета- 
лей. В темных глубинах мы видим объекты, которым 
положено находиться под землей, хотя мы не сразу по- 
нимаем, что именно подземелье нам и показывают. 


Одна из обязанностей дизайнера -— увидеть мир на- 
столько детально, чтобы адекватно воспроизвести его 
в своей работе или, как в случае «Что там в глубине», 
создать ощущение окружающей обстановки. 


Значит, вы должны научиться понимать детали, а не 
только видеть их. Входя в комнату, вы сразу же заме- 
чаете очевидное: стены, окна (или их отсутствие) и 
мебель. 


Но как насчет текстуры: Трещины в дереве, отслоив- 
шаяся краска, выкроптивитаяся штукатурка, треснутое 
или выцветшее стекло? А много ли внимания вы о6б- 
ращаете на свет и тень? Что можно сказать об общем 
впечатлении от комнаты? Она мрачная? Светлая? Про- 
сторная? Тесная: Отвечая на эти вопросы, вы раскро- 
ете не сразу бросающиеся в глаза детали, благодаря 
которым и возникает ощущение реальности. 


В дизайне «Что там в глубине» эти детали видны по- 
всюду. В частности, это муравьи, которые и вдохно- 
вили автора первоначально (рис. 1). 


Создание ощущения 
реальности 


Интересно отметить, что для создания реалистичнос- 
ти вовсе не нужна фотографическая точность. Образы, 
использованные в работе «Что там в глубине», не назо- 
вешь фотореалистичными, тем не менее ощущение 
реальности изображенного очень сильно. 


Нужно, чтобы сама графика производила впечатление 
реальности изображенного. Пытаясь создать изображе- 
ния, которые не просто копируют природу, а пробужда- 
ют мысленные ассоциации, имейте в виду следующее: 


+ обращайте повышенное внимание на края. Эта тема 
трудно дается начинающим художникам на заня- 
тиях по рисованию человеческих фигур. Сначала 
пытаются просто нарисовать линию, к примеру, 
женской руки. Но очень быстро выясняется, что не 
все так просто. Обработка краев подчеркивает 
объемность очертаний, игру света и тени, разли- 
чия между позитивным и негативным простран- 
ством, Именно это и воспринимается нами как ли- 
ния (рис. 2); 


Рис.1 + Марширующие муравьи (изображение слегка осветлено) 


Рис. 2 + Края — это не просто четкие линии. Они образуются 
в результате игры света и тени, линии и пространства 
(изображение слегка осветлено) 


Рис. 3 + Текстура будки управления светофором создает 
ощущение земли (изображение слегка осветлено) 


Рис. 4 + Очень темная, мрачная часть работы «Что там в 
глубине» создает ощущение тяготения (изображение слегка 
осветлено) 


Рис. 5 + Изображение человеческой берцовой кости под землей. 
Кажется, что кость обладает массой (изображение слегка осветлено) 


ПРИМЕЧАНИЕ 


Хотя определения массы, твердости и объема в математике и 
дизайне в чем-то перекрываются, но между ними есть и раз- 
личия, связанные с тем, как эти понятия применяются в раз- 
ных отраслях знания, 


Создание трехмерной сцены 


+ не забывайте о форме. Оглядитесь вокруг и найди- 


те предмет, любой предмет. Тщательно осмотрите 
и определите его форму. В большинстве объектов 
вы обнаружите множество разных форм, это очень 
важно. Нельзя сказать, что чантка — это всего лишь 
окружность. Конечно, в ней есть и окружности, и 
дуги. Но могут быть и другие формы, которые от- 
личают ее от других чашек; 


текстура изображения создает реалистичное представ- 
лениео качестве предметов. Чтобы нарисовать почву 
в работе «Что там в глубине», Пик сделал фотогра- 
фию будки управления светофором на Хьюстон- 
стрит в Нью-Йорке. Интересно, что текстура будки — 
совершенно, казалось бы, не относящегося к делу 
предмета, — наводит на мысли о почве (рис. 3); 


глубина - вот что дает настоящее ощущение объем- 
ности, даже в двумерном окружении. В геометрии 
ось х определяет горизонтальное, а ось у - верти- 
кальное направление. В третьем измерении прохо- 
дит ось 7. Именно с осью # и связана глубина. Вос- 
приятие глубины вдвумерном дизайне определяется 
светом и тенью краев. На рис. 2 видно, что более тем- 
ные области выглядят как углубления на поверхно- 
сти земли; 


важна и имитация тяжести. В двумерном дизайне 
этот эффект достигается за счет зрительной тяже- 
ловесности образов. К моделируемому окружению 
применимы те же принципы, но необходимо еще 
какое-то визуальное указание на то, что предмет 
склоняется под своей тяжестью к низшей точки 
изображения. Самая темная, окрашенная сплош- 
ным цветом область в дизайне «Что там в глубине» 
находится в нижней части подземной сцены, это 
усугубляет ощущение тяготения (рис. 4). 


При создании представления трехмерных объектов на 
двумерной странице комбинация описанных выше 
средств создает иллюзию массы. 


В контексте визуального дизайна массу можно опи- 
сать как характерный признак трехмерного объекта, 
призванный создать впечатление, будто он выделяет- 
ся на фоне окружающего его пространства. Примите 
во внимание следующие принципы: 


+ иллюзия твердости создается за счет цвета и тек- 


стуры; 


4+ для создания иллюзии объемности важны длина, 


ширина и глуби на. 


Масса — это результат сочетания подобных визуаль- 
ных элементов, в результате чего объект приобретает 
реалистичные черты (рис. 5). 


И, наконец, если взять какой-то природный объект и 
поместить его в смоделированную среду, то эффект 
реалистичности может усилиться. В данном случае 
образ крота вселяет в зрителя жутковатое чувство до- 
стоверности остальной части дизайна (рис. 6). 


Работа с уровнями 


Еще одна сторона, с которой веб-дизайнеры редко 
сталкиваются, — это работа с уровнями. Имеются в 
виду отдельные слои в пространстве. Концепция уров- 
ней становится понятной, если вспомнить об офис- 
ном здании. Каждый этаж — это уровень. 


При программировании игр огромное внимание уде- 
ляется проработке архитектурных уровней в про- 
странстве игры. Дизайнеры игр часто специально изу- 
чают, как архитекторы и дизайнеры окружающей 
среды подходят к проектированию зданий. 


Из архитектуры, дизайна окружающей среды иу раз- 


работчиков игр мы можем позаимствовать следующие 


идеи, важные при моделировании многоуровневого 

пространства: 

+ каждый уровень уникален с точки зрения линий, 
пространственного расположения и масштаба; 


$ каждый уровень, тем не менее, интегрирован в об- 
щую картину и тем или иным способом связан с 
уровнями выше и ниже его; 


+ между поверхностями имеются естественные пере- 
ходы; 


+ 


в дизайне всегда есть фокусн ая точка, 


+ как уже отмечалось, важно передать идею тяготе- 
ния. Человек ожидает, что на предметы действует 
сила тяжести. 


В работе «Что там в глубине» есть три четко выражен- 
ных уровня: небо (рис. 7), трава (рис. 8) и подземная 
область (рис. 9). 


Изучая эти изображения, можно понять, как идеи воп- 
лощаются на практике. У каждого уровня есть свои 
особенности. Каждый уровень органично связан с 
уровнем выше (рис. 10) и уровнем ниже (рис. 11). 
Фокусной точкой в данном случае служит подземелье. 


| 170) Графика ь ан [|-—-—---ыы 


Рис. 7 + Верхним уровнем дизайна является небо 
Рис. 8 + Средний уровень -— трава (изображение слегка осветлено) 


ПРИМЕЧАНИЕ 


Цветной вариант рис. 7 и 8 см. на вкладке. 


Рис. 3 + Нижняя часть страницы занята подземным уровнем 


Рис. 10 + Переход от верхнего к среднему уровню. 
Обратите внимание, как небо проглядывает сквозь траву 


Рис. 11 + Переход от травы к подземному уровню достигается 
за счет постепенного нарастания темных цветов и изображения 
корней травы, прорастающих из земли (изображение слегка 
осветлено) 


ПРИМЕЧАНИЕ 


Цветной вариант рис. 10 и 11 см. на вкладке. 


Рис. 12 + Порча шрифта способствует его интеграции 
в пространство дизайна 


Пана Ной: 


Рис. 13 + Использование того же цвета, который применяется 
в смоделированной сцене, помогает включить нереалистичные 
объекты в контекст 


Интересно, что подземный уровень создает ощуще- 
ние тяготения за счет своей большей высоты, массив- 
ности и более темного цвета — по сравнению с верх- 
ним и средним уровнями. 


Нереалистичные образы 
в смоделированном 
пространстве 


Все мы знаем, что ни заголовок, ни текст, ни ссылки 
под землей не существуют. Однако Пик применил та- 
кую технику, при которой абстрактные объекты ка- 
жутся естественно интегрированными в дизайн. 


Обратите внимание на текст заголовка (рис. 12). 
Видно, что дизайнер взял некоторый шрифт и со- 
знательно подпортил его. Поцарапанные и испач- 
канные буквы лучше сочетаются с прочей графикой 
на странице. 


Пик также неслучайно выбрал цветовую гамму. Цвет 
ссылок совпадает с более яркими частями фигуры кро- 
та. Это создает ощущение освещенности и более тес- 
но увязывает ссылки с другими частями страницы 
(рис. 13). 


Неслучайно и то, что к ссылкам не применяются ни- 
какие цветовые эффекты. При наведении курсора 
мыши на ссылку она лишь подчеркивается. Это пре- 
пятствует появлению лишних ассоциаций, 


Если бы Пик решил взять для ссылок другие цвета, 
скажем, голубой цвет неба или зеленый цвет травы, 
то разрушил бы иллюзию, поскольку придал бы под- 
земному уровню несвойственные ему качества. 


А так целостность дизайна не нарушается. 


Уроки трехмерности 


Вообще говоря, именно экспериментальная природа 
сайта С$$ Хеп Саг4еп позволила исследовать возмож- 
ности моделирования подземного пространства. Толь- 
ко обладая изобретательным умом и вниманием к де- 
талям Майкла Пика, можно было создать такой 
уникальный дизайн. 
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Типография 


Естественное упрощение форм общения во 
многом обязано печатному слову. Именно 
таким способом чаще всего происходит об- 
мен идеями, описываются события, чувства 
и другие человеческие проявления. 


Любой практикующий веб-дизайнер знает, 
что типография в Ме сопряжена с серьез- 
ными трудностями. Но это не должно оста- 
навливать вас на пути совершенствования 
своей техники и исследования технологий, с 
помощью которых можно удовлетворить 
страсть к форме, стилю, толщине и гарниту- 
решрифтов. Эта глава будет посвящена при- 
емам, связанным с типографскими особен- 
ностями дизайна. 
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Дизайнер Райан Симс (Куап $1т$) 


\уимим.с$5тепдагаеп.сот/085 


Два океана 


Простота типографии ведет к эффектному дизайну 


= : - - КЛРЕАЛ 1:7. 2’ 


Изумительная цветовая палитра «Двух океа- 
нов» обязана своим происхождением фото- 
графии, которую Райан Симс сделал в Юж- 
ной Калифорнии. Спокойные, как сам Тихий 
океан, цвета и образы создают легкий кон- 
траст, который привлекает взгляд зрителя. 


Работа «Два океана» не кажется кричащей или 
резкой. Частично это ощущение утонченно- 
сти создается за счет простоты дизайна. Симс 
не стал злоупотреблять изображениями, цве- 
тами и шрифтами, а последовал философии 
Хемингуэя: «Уберите все вычурное». Он с 
удовольствием наблюдал, как дизайн ожива- 
ет по мере того, как лишнее удаляется, а не 
добавляется. 
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Рис. 1 + Когда промежуточных насыщенностей нет, 
браузер пытается сделать все, что в его силах, 

но часто вынужден ограничиваться только нормальным или 
полужирным начертанием 


септигу сондепзей 
сешигу погта1 


сетлгу ехрапдед 


Рис. 2 + Узкий, нормальный и широкий варианты начертания 
шрифта 


Соглашения о шрифтах _ 


Соглашения о шрифтах 


Типография - это особая область дизайна. Многие 
дизайнеры всю жизнь занимаются исследованием, 
применением и созданием шрифтов. И хотя единого 
подхода к разработке эффектного шрифта не суще- 
ствует, но есть важные соглашения, о которых дол- 
жен знать каждый дизайнер, 


Форма шрифта 


Форма шрифта - это общий термин, включающий 
такие характеристики шрифта, как насыщенность, 
кегль и наклон. 


Насыщенность шрифта - это мера толщины отдель- 
ных литер. В (5$ этой характеристике соответствует 
свойство ЕопЕ-метоНе. В табл. 1 описан смысл раз- 
личных значений этого свойства. 


Разумеется, тут полно нюансов, и самый важный из 
них состоит в том, что не во всех шрифтах есть про- 
межуточные варианты, согласующиеся с требования- 
ми С$5 (рис. 1). Более того, даже если шрифт облада- 
ет вариантом с нужной насыщенностью, браузер не 
всегда сможет его отобразить. 


На практике можно всегда быть уверенным в нали- 
чии по крайней мере двух видов начертания шрифта 
(погма]1 и Бо1а). На рис. 1 показано, как браузер, в 
данном случае МохШа, выводит текст предположи- 
тельно шрифтами разной насьиценности. В реально- 
сти оказывается, что насыщенностей всего две: полу- 
жирная и нормальная. 


Под кеглем шрифта понимается ширина литер, состав- 
ляющих этот шрифт. Встречается узкое (соп4епзед), 
нормальное и широкое (ехрап4е4) начертание (рис. 2). 
В С55 для этой характеристики есть свойство ЁопЕ- 
зегеЕсН. Однако оно неиспользуется, потому что ни 
один из распространенных браузеров его не поддер- 
живает. 


Еще одной характеристикой шрифта является наклон, 
он соответствует свойству С5$ ЕопЕ-5Еу1е, Суще- 
ствует два вида наклона: 


$ Ца|с (курсив) — специально разработанная моди- 
фикация прямого шрифта с дополнительными «за- 
витушками», как при рукописном начертании; 

$ ОБй4ице (наклонный) — модификация прямого 
шрифта, отличающаяся от курсива, поскольку она 
разработана не специально, а просто повторяет 
рисунок прямого шрифта, но с наклоном основных 
штрихов. Многие люди употребляют термин Йайс 
там, где на самом деле имеется в виду общие, 


У свойства ЕопЕ-з(у1е есть четыре возможных зна- 
чения: погща1, 1Са11с, ор11а1щеи 1ппегаг. 


Контрастность шрифта 


Контрастностью шрифта называется соотношение 
между тонкими и толстыми линиями одной литеры. 
У разных шрифтов эти пропорции меняются весьма 
существенно, но есть и такие шрифты, где все линии 
имеют постоянную толщину. 


В стандартном полиграфическом дизайне принято ис- 
пользовать один шрифт для заголовков, а другой — 
для основного текста. Как правило, в заголовках при- 
меняется шрифт без засечек, поскольку округлые, 
обычно слабоконтрастные литеры привлекают больше 


ПРИМЕЧАНИЕ 


Если на вашем компьютере установлен полужирный, курсив- 
ный или наклонный вариант некоторого шрифта, то браузер 
обычно им и воспользуется. Если же такого варианта нет, то 
браузер сымитирует его, программно модифицировав обыч- 
ный шрифт. Разница часто заметна острому глазу дизайнера. 


ПРИМЕЧАНИЕ 


У многих складывается впечатление, что в \МеБ дело обстоит 
прямо противоположным образом: на экране лучше выглядят 
шрифты без засечек, Но споры продолжаются. Подробнее об 
этой полемике можно прочитать на странице улмм. 4191 а1- 
уер.сот/пе\5/2004/06/5ет{_м5_запзеп{. 


эифты в «Двух океанах» 


внимания, Шрифты. с засечками долгое время счита- 
лись предпочтительными для основного текста, осо- 
бенно если он состоял из длинных фрагментов. Боль- 
шинство книг напечатано именно такими шрифтами, 
но вопрос в том, следует ли применять ту же практи- 
ку в У\еЬ, все еще дебатируется. 


Цвет шрифта 


Под цветом шрифта (Гуре со]ог) в полиграфии по- 
нимают общий оттенок блока текста. У светлых 
шрифтов типа Неуейса 112 светлый цвет, посколь- 
ку наносится очень мало краски; насыщенные же 
шрифты типа Соорегили Ата] ВасК выглядят гораз- 
до темнее, потому что краски наносится больше. Но 
цвет шрифта зависит не только от гарнитуры, на вос- 
приятие влияют и другие факторы, например меж- 
буквенный интервал (кернинг) и межстрочный ин- 
тервал (интерлиньяж). 


Помимо контрастности, для зрительного восприятия 
шрифта важен еще цвет, которым печатаются лите- 
ры. Оттенок шрифта (уре Вие) играет заметную 
роль, так как наряду с контрастными шрифтами ди- 
зайнер может еще выбирать и контрастные цвета. 


Вообще говоря, не рекомендуется злоупотреблять 
многоцветием при выборе шрифтов. Бывают, конеч- 
но, случаи, когда наличие большого числа цветов оп- 
равдано, — скажем, на сайтах, предназначенных для 
детей. Но обычно переизбыток цветов свидетельствует 
о непрофессионализме. 


Шрифты 
в «Двух океанах» 


Стремление Симса к простоте отчетливо видно на 
примере работы «Два океана». Весь НТМГ-текст ото- 
бражается шрифтом ТгеБисвеь, а на случай его отсут- 
ствия указано еще несколько шрифтов без засечек: 
Боау ({ЕопЕ: 11рх; «ЕгебБасвее пб», аг1а1, 
Не]уеЕ1са, взалз-зега Е; } 
ТтебисВе( — это шрифт без засечек; входящий в базо- 
вый комплект шрифтов М15сгозоЙ для \УеЬ и постав- 
ляемый также в комплекте с Мисгозой ОЁЁсе. Это зна- 
чит, что он распространен достаточно широко, хотя 
предусмотреть его отсутствие тоже необходимо. 


Выбор оттенка и контрастности 


Выбор оттенка и контрастности шрифта критически 
важен — не только для поддержания целостности ди- 
зайна, но и с точки зрения удобочитаемости, то есть 
легкости восприятия текста. 


По традиции рекомендуется выбирать высококонтра- 
стные цвета для фона и переднего плана, например 
черный текст на белом фоне или наоборот. Предпо- 
лагается, что наряду с другими приемами это повы- 
сит удобочитаемость. 


В «Двух океанах» Симс отошел от этой традиции и 
выбрал для основного текста очень изысканный жел- 
то-коричневый цвет: 


со10от: #929272; 


Контраст с белым фоном в этом случае относительно 
слабый (рис. 3). Интересно, что ссылки и в основном 
тексте, и по краям отображаются более темным оттен- 
ком синего цвета. Многие дизайнеры предпочли бы 
использовать такой цвет для основного текста из-за 
более высокой контрастности (рис. 4). 


Надо признать, что при печати основного текста си- 
ним цветом контрастность улучшилась, но утончен- 
ный контраст, достигаемый за счет использования 
желто-коричневого цвета, выглядит приятнее. Имен- 
но выбор этого цвета и придает странице такой успо- 
коительный вид, из-за чего и читать ее проще. 


Более того, употребление синего цвета для выделения 
ссылок как внутри текста, так и в списке добавляет 
всему дизайну контрастности. И заодно делает стра- 
ницу более интересной — подход тонкий, но в данном 
случае весьма эффективный. 


Контрастность играет роль и при выборе инверсных 
цветов для заголовка, Текст внутри изображения ото- 
бражается белым шрифтом на полупрозрачном фоне 
поверх фотографии (рис. 5). А сразу под ним распо- 
ложен подзаголовок, напечатанный тоже белым 
шрифтом, но на темном желто-коричневом фоне. Это 
создает интересный переход форм и движение, уси- 
ливающее общий эффект (рис. 6). 


Текст в основной части страницы напечатан шриф- 
том размером 1] пикселей, равно как и ссылки в глав- 
ном списке. Для дополнительных же ссылок выбран 
шрифт размером 9 пикселей, чтобы отразить их мень- 
шую значимость, Удивительно, что может сделать раз- 
ница всего в два пикселя, когда используется в сочета- 
нии с переменной контрастностью (рис. 7). 
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Тре Крад {0 Епанкепгтеги 


ИЕегте а да’К апд дтеагу гоад ау {Ве раз гейс$ 01 
Бгомзет-рес!с аз, псотраНЫе СОМ5, ап9 Бгокеп 
05$ зиррог*, 


Тодау, ме туз* сеаг {Пе пипд о! ра${ ргасЯсе$. "еб 
епиэН%ептепх па; Бееп асМеуед {Рапк$ $0 {пе Ч ге! е$$ 
еНотЕ$ ог ТОК ИКе Пе \!3С, \\а5Р апа Пе та ОР 
Бибшзег ства, 


ТАе 55$ деп Сагдеп 1пуКез уси фо гаах апд тедКа*е 
оп {Пе 1трогапЕ 1е550п$ от Ве таз&ег$, Вест Фо 5ее 
цел багу, Цеагп $0 изе {Пе (уе фо Бе) Ите-бопогед 
фесАг4дуе; п пем ап9 пу зогаИпе ГазМоп, Весоте 
опе илЕН {Ве меб. 


Рис. 3 + В этом дизайне используется слабоконтрастный 
желто-коричневый шрифт 


Тре Коад 10 Епйай\епилеги 


пили 


Инете а дагК апд дгеагу гоад ау {Пе раз гейс$ от 


Тодау, ше туз деаг {Пе пипд о! раз ргасИсез, \\еб 
епиеНЕептеги Ваз Бееп асеуед {ПапкКу Хо {Не Ч!гае$$ 
еГог+$; от ТОК МКе {Ве \/ЗС, \\Ма5Р апд {Не таг 
Бгошзег стеафог$, 


ТНе с5; Реп багаеп пуКе$ уоц +0 геах апд тедКае 
оп {Пе 1тротфаг 1е5$5$о0п$ о? {Пе тазфегу, Везтт Фо 5ее 
ЛЕА сагКу, Цеагп Фо узе {Не (уе{ То Бе) Яте-Попогед 
Зеспгйдуе; 1п пем апд пллеогайпе Тазтоп, Весоте 
опе ИЕР {Ве шеБ, 


Рис. 4 + Улучшение контрастности за счет выбора более 
темного (синего) оттенка из той же палитры не так хорошо 
соответствует общей теме дизайна 


СОВЕТ 
Без сомнения, выбор слабоконтрастных цветов может выз- 


вать трудности у людей с ослабленным зрением, Для профес- 
сиональных дизайнерских работ, рассчитанных на широкую 


аудиторию, лучше придерживаться более традиционных ре- 
шений в плане цветов и контрастности, чтобы страница была 
удобочитаемой. 


Рис. 5 4+ Контрастность шрифта в заголовке «Двух окванов» 


Я фельзия г о Ноа 27 Ат сои №2 аЕ о ко = 
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Рис. 6 + Инверсные цвета в тексте, расположенном ниже заголовка 


ПРИМЕЧАНИЕ 


Цветной вариант рис. 5 и 6 см. на вкладке. 


сагЧегиах де РегГите 
Ьу дггтапдо оза 


Рис. 7 + Когда визуальный эффект создается разницей 
в размере и контрастности шрифта, 2 пикселя кажутся больше, 
чем на самом деле 
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Рис. 8 + Графический текст набран заглавными буквами 


и помещен на другой фон. Он выделяется на странице, 
поскольку больше нигде такая комбинация цветов не встречается 
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Учитесь простоте 


Использование размера 
и насыщенности шрифта 
для создания контрастности 


Возвращаясь к заголовку на рис. 5, хочется обратить 
ваше внимание на то, что в этом графическом тексте 
Симс для создания контрастности воспользовался раз- 
мером и весом шрифта, Слово с$$ набрано маленьки- 
ми буквами и контрастирует с начальными заглавны- 
ми буквами в словах (еп Саг4еп. Подзаголовок ниже 
дает прекрасный пример создания контраста за счет 
насыщенности: слово Беацу в нем выделено полужир- 
ным шрифтом из окружающего текста, отображаемо- 
го обычным шрифтом. 


Тот же прием прослеживается и в картинке непосред- 
ственно под фотографией, где первые семь слов напе- 
чатаны полужирным шрифтом, а остальные - нор- 
мальным (рис. 6). 


Соотношение заголовков 
и текста 


И последнее, что следует отметить, — это соотноше- 
ние заголовков и текста в «Двух океанах». Заголовки 
внутри основного текста графические, для них исполь- 
зован уже упоминавшийся выше оттенок синего цве- 
та. Буквы отбрасывают едва заметную тень — лишь 
намек на нее, но это придает завершенность шрифту 
и помогает привлечь взгляд к заголовкам. 


Если уж мы заговорили о взгляде, то отметим еще один 
нюанс, более нигде в дизайне не встречающийся, — за- 
головки для разделов ссылок (рис. 8). Это графичес- 
кий текст, набранный заглавными темно-синими бук- 
вами на светло-синем фоне, контрастирующем с 
желто-коричневым цветом вокруг. Такой заголовок 
отчетливо выделяется на странице и служит прекрас- 
ным визуальным обрамлением для навигационных 
ссылок. 


Учитесь простоте 


Хотя на первый взгляд дизайн «Двух океанов» кажет- 
ся бесхитростным, но эта обманчивая простота созда- 
ет спокойное и беззаботное настроение. Тонкие допол- 
нительные штрихи, особенно в использовании 
шрифтов, - это урок, который не стоит забывать при 
работе над собственными проектами. 
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Проблема шрифтов и как с ней бороться 


Создавая $16, дизайнер Шон Инман восполь- 
зовался преимуществами сеточной структу- 
ры. Воображаемые границы разделяют макет 
на три колонки. Тонкие линии между стро- 
ками текста подчеркивают взаимосвязь меж- 
ду заголовками в левой колонке и абзацами в 
средней части, к которым они относятся. 


Сам текст аккуратно расположен точно по- 
верх линий, нарисованных на фоновом изоб- 
ражении. Благодаря такой точности страни- 
ца выглядит безупречно, но это впечатление 
легко разруптить, если пользователь изменит 
масштаб текста (а из-за малого кегля шриф- 
та и слабой контрастности это может оказать- 
ся необходимым). 


СОВЕТ - 


МусгозоЁ публикует списки шрифтов, поставляемых с различ- 
ными приложениями (млм. тусгозоЙ.сот/буродгарНу/Ропе$/ 
деГаи,азрх). Но поскольку пользователи могут удалять или 
просто не устанавливать шрифты, то все равно нет никакой 
гарантии, что нужный шрифт будет доступен. 


СОВЕТ 


В 2001 году был проведен опрос на тему, какие шрифты ис- 
пользуются наиболее часто. Хотя его результаты нельзя счи- 
тать непогрешимыми, так как доля ошибочных ответов неиз- 


вестна, но все же основой для сравнения они служить могут. | 
Подробнее об этом опросе читайте в статье «Соде 5 е РопЁ 
Затр(ег» (м/и. содез\е.огд/с$$/Роп{-Гат у). 


Ограниченность набор 


Ограниченность 
набора шрифтов 


Быть может, наибольшую досаду при работе со шриф- 
тами в У/еЬ вызывает тот факт, что выбор доступных 
шрифтов неширок и непредсказуем, учитывая, что 
пользователь может устанавливать на свой компью- 
тер одни шрифты и удалять другие. Маловероятно, 
что в обозримом будущем в этой области что-то кар- 
динально изменится, 


Если не считать шрифтов, используемых во НазН-ани- 
мациях или встроенных в графические изображения, 
то вся типография в УУеЬ базируется на тех шрифтах, 
что есть на компьютере пользователя. Однако пользо- 
ватели по большей части не являются дизайнерами, 


поэтому на их машинах редко можно встретить 


шрифты помимо тех, что поставляются в комплекте с 
операционной системой или приложениями. К при- 
меру, на тех машинах, где установлен Мисгозо  ОЁЙсе, 
выбор шрифтов шире, чем на машинах, где этот па- 
кет не стоит. 


Системы \/1тп40\5 и Мас О$ Х комплектуются раз- 
ными наборами шрифтов. В какой-то мере они пе- 
ресекаются, но если еще учесть и различные вари- 
анты Ошх (включая и лпах), то окажется, что 
уверенным можно быть лишь в том, что ни в чем 
нельзя быть уверенным. В табл. 1 перечислены не- 
которые шрифты, обычно присутствующие на 
каждой из трех платформ. 


Таблица 1 + Наиболее распространенные шрифты для \М№еБ по платформам 
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В 1996 компания МсгозоЁ выпустила комплектириф- 
тов, спроектированных специально для просмотра на 
экране. Это базовые шрифты для МУеЪ, их можно было 
скачать бесплатно, поэтому они получили широкое 
распространение. В наши дни они обычно устанавли- 
ваются вместе с продуктами Мггозой. Включенные в 
этот комплект итрифты перечислены в табл. 2. 


Таблица 2 + Основные шрифты для \еБ от МсгозоЯ 


Вообще говоря, считается безопасным предполагать 
в дизайне, что эти шрифты существуют, но, когда 
речь идет о \№еъ, уверенным ни в чем быть нельзя. 
Именно по этой причинев С$5 разрешается указы- 
вать несколько шрифтов и даже общее семейство на 
тот случай, если ни одного из них в машине пользо- 
вателя не окажется, 


Общие семейства 
шрифтов 


Инман хотел, чтобы в $16 использовались шрифты с 
гарнитурой Сепеуа, применяемые в Мас. Поскольку 
он знал о том, чем рискует, выбирая шрифт, отсут- 
ствующий в \/1140%5, то включил в список предпоч- 
тительных шрифтов и альтернативы: 

Боду | 


Гоп: 
} 


В данном объявлении первые два значения —это кегль 
шрифта (9 рх) и интерлиньяж (16 рх), Затем перечис- 
лены допустимые шрифты в порядке предпочтитель- 
ности (рис. 1). Если браузер не сможет найти шрифт 
Сепеуа, то он сначала будет искать Апа|, затем Тапота 
и в самом крайнем случае, когда все другие возмож- 
ности исчерпаны, шрифт без засечек, указанный в 
настройках по умолчанию, 


9рх/16рх Сбепеуа,Аг1а]1 , Табота, вапз-вег1Е; 


Общие семейства шрифтов встроены в С$$, и совмес- 
тимые браузеры автоматически находят ирифты, со- 
ответствующие каждому семейству (хотя пользователь 
может отменить выбор браузера). Несмотря на то что 
от дизайнера нетребуется во что бы то ни стало указы- 
вать общее семейство в каждом объявлении шрифтов, 
лучше это сделать (если, конечно, вы не являетесь не- 
поколебимым приверженцем Типез Мем Коглап). 


ПРИМЕЧАНИЕ 


К сожалению, в 2002 году бесплатное распространение базово- 
го комплекта шрифтов для М№еБ на официальном сайте МусгозоЙ: 
было прекращено, но (благодаря либеральной лицензии) они 
выложены по адресу Ир: //согеГопЕ. зоигсеГогае.пе{. Посколь- 
ку эта страница предназначена для пользователей Ипих, то найти 
версии для \\!пдо\$ там нелегко, поищите фразу «Опо?па! 
ипаЦегед.ехе е5». 


СЕГЕСТА ОЕ$!6Н 
Бу Аппалдо Зоза 


Рихмшита 
бу Адат Ровай 
Выатоине 

Бу Зизил Ува 


Рис. 1 + Как выглядит $16 при использовании разных шрифтов: 
бепеуа (сверху), АПа! и Тапота 


Тапез Ме\у Котап 
Сеот?ла 


Сагатойа 


Рис. 2 + Примеры шрифтов с засечками: Птез Меми Вотап, 
беогоа и багатопд 


Не№\ейса 
_ Рогога 


[иса $ап$ Упкоде 


Рис. 3 + Примеры шрифтов без засечек: Немейса, Рщига и 
Шова бап$ Ипсоде 


Мопасо 


Апда1е Мопо 


Рис. 4 + Примеры моноширинных шрифтов: Соипег, Мопасо и 
Апда!е Мопо 


Рис. 5 + Примеры рукописных шрифтов: Сотю $апз, Арр!е 
Спапсегу и Вгизй Зепре МТ 


Ра рупиз 


Рис. 6 + Примеры фантазийных шрифтов: рас! и Раругиз 


Красиво, но... 


Ниже перечислены все общие семейства с кратким 
описанием каждого. 


5еп! 


В шрифтах семейства зет1 Е есть декоративные засеч- 
ки, то есть небольшие черточки на концах штрихов 
(рис. 2). Почти всегда назначаемым по умолчанию 
шрифтом семейства зег1 Е является Типез Ме\м 
Котап, если только пользователь явно не указал иное. 


5ап$ ет! 


Шрифты семейства запз-зег1Ё не имеют засечек 
(рис. 3). Почти всегда назначаемым по умолчанию 
шрифтом семейства зап-зег1 Е является Апа|. 


топо5расе 


Шрифты семейства попозрасе имеют постоянную 
ширину: каждая литера занимает одинаковое про- 
странство (рис. 4). Так, например, ширина буквы 1 та- 
кая же, как буквы т. Такие шрифты бывают полезны, 
когда надо напечатать листинг программы, в котором 
символы должны находиться друг под другом. Почти 
всегда назначаемым по умолчанию шрифтом семей- 
ства попозрасе является Соимег, 


сигуГие 


Шрифты семейства сиг 1уе имитируют рукописное 
написание и применяются по большей части в заго- 
ловках (рис. 5). По умолчанию назначаются разные 
шрифты, но чаще всего это Соглс 5ап5. 


фата5у 


Фантазийные шрифты применяются исключитель- 
но в декоративных целях - как правило, в заголовках 
(рис, 6). Поскольку к этой категории можно отнести 
очень много разных шрифтов, то предсказать, как 
будет выглядеть шрифт заданного размера в конк- 
ретном браузере, невозможно. Поэтому для серьез- 
ного дизайна ими не пользуются. 


Красиво, но... 


Если, занимаясь дизайном сайтов, вы в трех из четы- 
рех случаев пользуетесь шрифтами Уегдапа и Сеогрла, 
то иногда выбор игрифта, который заведомо отсут- 
ствует на машинах большинства посетителей, может 
показаться забавным способом привнести некото- 
рое оживление в свою работу. Нужно только указать 


УМ Типог 


афия 


резервные шрифты для большинства пользователей, 
у которых нет основного, и тогда вы сможете наслаж- 
даться новыми возможностями, позабыв об ограни- 
чениях. 


Следующие комбинации хорошо работают, посколь- 
ку указанные шрифты более-менее похожи; первый 
шрифт в списке выглядит ново и неожиданно, а сле- 
дующие — безопасная подстраховка: 
роду { 
Еопе-Еам1]у; "Гас1аа Сгапае", 
Оп1соае", Уетгадапа, 
запз-вег1Ё; 
} 


"[л1с1аа бапз 


В2 { 
ЕопЕ-Еам1]у: Сагатопа, "Тез Мех Вотап”“, 
вег!1 ЕЁ; 
} 
аЕ, 12 ( 


Еопе-Еам11у; Оре1та, Аг1а1, запз-век1Е; 
} 
.31ЧаеБагСа11]о4е { 
Ропе-Еат11у: "Сепемкгу СоЕВ1с”, Уегдапа, вапз- 
зег1Ё; 
} 
Выше вы уже видели, что Инман в качестве основного 
шрифта указал Сепеуа, а в качестве резервных — Апа|и 
'ТаВогла. Такая комбинация особенно удачна, посколь- 
ку у всех трех шрифтов примерно одинаковая х-вы- 
сота. Х-высота определена в книге КоЬ Сацег, Веп Рау 
и РЬЫШр Мере5 «ТуровргарЬ1с Реза; Роги апа 
СотатитшсаНоп» 3-е издание (]обп \/Теу & 5оп$, 2002) 
как «высота строчных букв, исключая верхние и ниж- 
ние выносные элементы. Чаще всего измеряется по 
строчной букве х». 


Возможно, вы обратили внимание на то, что некото- 
рые шрифты кажутся крупнее других, хотя указан один 
и тот же кегль; например, с кеглем 16 рх Уегдапа кажет- 
ся заметно больше других шрифтов того же размера 
(рис. 7). Составляя список шрифтов, следует иметь в 


нирас! 
Спсадо 
\егдапа 
ТгеБисНе{ М$ 


иса Сгапае 


Сепеуа 
Еуго5Ие 
Апда\е Мопо 
Немейса 


р Сачюоп 
|Райайпо 


Орйтпа 
"Титез Ме\/ Котап 
Сеотрла 

Рога 

рр Свапсегу 
Вей бою 

Мупаа Рго 
СОРРЕВРЕАТЕ 
| СШ Зап; 
Соцетек 
Вазкегле 
ба Зе ИТ 
Рис. 7 + Разные шрифты с кеглем 16 рх и различной х-высотой, 


Обратите внимание, как отличаются шрифты в верхней и 
нижней части списка 


Мени 


Подход к выбору шрифтов 


виду, что значение свойств ЕопЕ-812е применяется 
к каждому из них; если наиболее предпочтительный 
для вас шрифт имеет относительно большую х-высо- 
ту, а на компьютерах пользователей установлен 
шрифт поменьше, то в некоторых ситуациях может 
получиться нечитаемый текст. Поэтому проверяйте 
свой выбор на разных браузерах и платформах. 


В 1998 году в спецификации С$$2 появилось свой- 
ство ЕопЕ-512е-аазазЕ специально для того, что- 
бы решить проблему неодинаковой х-высоты, но 
поскольку оно так никогда и не было реализовано в 
большинстве браузеров, то из спецификации С$$ 2.1 
исчезло, Быть может, оно будет востребовано, ког- 
да завершится работа на С$$3, а пока полагаться на 
него не стоит. 


Практический подход 
к выбору шрифтов 


Из-за широкого разнообразия наборов шрифтов, ус- 
тановленных на компьютерах пользователей, невоз- 
можно точно предсказать, в каком виде сайт предста- 
нет перед посетителями, Поэтому лучите не предаваться 
иллюзиям и смириться с тем фактом, что различия не- 
избежны. 


Но вовсе необязательно во всех случаях ограничи- 
ваться только шрифтом Апа|- пути для эксперимен- 
тирования во Всемирной паутине все еще открыты. 
Правильно отнесясь к намеку Шона Инмана, вы об- 
наружите, что отход в сторону от базовых шрифтов 
УМеЬ может принести свои плоды, 


| рее : 
ЗЕЕ ел Ват &. 1 
Ре 
не бе д БлЫ: роль па ьЫьЫ НЫ аа пез, в ржн -+ 
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Дизайнер Дидье Хильхорст (О1атег Н(Пог$Е) 
Мими. с552епдагдепт.сот/035 


Версия один 


Как примириться с безумием размеров шрифтов 


Е Шева Е ИЕ Ш 


Напившись кофе, Дидье Хильхорст подошел 
к «Версии один» как к упражнению на созда- 
ние запоминающейся торговой марки. Он 
применил ту же процедуру, что и для любо- 
го другого творческого произведения, приняв 
во внимание потенциальную аудиторию сай- 
та Хеп Саг4еп (веб-дизайнеры), требования 
(корректный код, изобретательный дизайн) 
и конкуренцию (другие сайты с отличным 
дизайном). 


Работая над «Версией один», он ставил себе 
задачу создать новый слоган для Геп Сат4еп. 
Круговой логотип должен напоминать ро- 
машку, но при этом остаться достаточно аб- 
страктным, чтобы вписаться в окружающий 
дизайн (рис. 1). Смелые оттенки зеленого и 
оранжевого завладевают вниманием зрителя, 
а более мягкая серая гамма и однотонные об- 
ласти оставляют место, на котором есть где 
отдохнуть взгляду, скользящему сверху вниз. 


С57ЕМСАРВОЕМ " 


Тве Везу у 01 С55 безюп 


Рис. 1 +4 Стилизованный логотип 7еп багдеп 


Средства браузера 


Размер шрифта 


Хотя печатная страница не передает точно масштаба 
и пропорций, характерных для компьютерного экра- 
на, но, возможно, вы заметили, что шрифты выгля- 
дят мелковато. А взглянув на таблицу стилей, вы пой- 
мете, почему это так: 


р { 
ПИ ЕСВЕтВЗетатркНиИ 
сехЕ-а119п: 7]а961Еу; 
} 
#ачтсксшитагу р.р? { 
ПоНЕажат УВ 
БасКкагочиЯ: Егапврагейс; 
со]ог: #999; 
БехЕ-а1191: 1еЕ6; 
} 


Это означает, что самый крупный шрифт (не считая 
тех, что в изображениях) по высоте не превышает 
|| пикселей, а местами используется даже шрифт вы- 
сотой 9 пикселей. Дизайнеры любят мелкие шрифты, 
поскольку при большом кегле используемые в МеБ 
шрифты выглядят непрофессионально. (Особенно 
этим страдает шрифт УегЧапа с кеглем больше 12 рх.) 
Кроме того, мелкий шрифт позволяет уместить в за- 
данной области больше информации. Хорошо, если бы 
все мы обладали зрением дизайнера, но, увы, это нетак. 


Средства, 
предоставляемые 
браузером 


К счастью, у посетителя сайта есть кое-какие возмож- 
ности. Все основные браузеры позволяют изменять раз- 
мер итрифта, делая его больше или меньше по жела- 
нию пользователя. В болыпинстве браузеров средства 
масштабирования находятся в меню Улем (Вид) или 
активируются при одновременном нажатии клавиш 
СЫ] + (плюс) и СШ - (минус). 


Если бы все шло, как задумано, то здесь можно было 
бы и закончить главу, заполнив оставшиеся страни- 
цы шутками и анекдотами. Увы, имеется проблема: в 
Пцегпе! Ехр]отег для УЛт4о\и5 единица измерения рх 
не масштабируется. 


Относительные 
и абсолютные единицы 
измерения 


Абсолютные единицы измерения длины имеют пре- 
допределенный смысл: см, 1п ире - это соответствен- 
но сантиметры, дюйм и пункт. Величина каждой из 
них известна, и бессмысленно доказывать, что 2,5 сп] 
равны полутора футам. 

С другой стороны, использование относительных еди- 
ниц - %, ем, 1агаег, зта11ет - предполагает, что 
между размерами существует некоторое соотношение. 
Ясно, что 2ем и 200% в два раза больше, чем 1ем и 
100%, но что такое вообще 1еп? И 100 процентов 07 
чего? Для каждой из этих единиц есть своя точка от- 
счета, и тут-то и начинаются различия: 1ет может 
быть равно и 3 дюймам, и 0,55 см, и еще много чему. 


Когда в таблице стилей применяются относительные 
единицы измерения, то устанавливается некий опор- 
ный размер, соответствующий 1еп или 100%, ираз- 
меры шрифтов вычисляются пропорционально. Для 
заголовков может быть задан шрифт размером 150% 
или 2, 2ет, для подписей — 0 , Зетили 75%. Опорный 
размер можно задать явно или оставить на усмотре- 
ние браузера, но в любом случае пользователь сможет 
его изменить, в результате чего все шрифты будут от- 
масштабированы соответственно. Именно возмож- 
ность управления со стороны пользователя и есть основ- 
ное достоинство относительных Посмотрите, 
как выглядит «Версия один» в Мом $ ХР при отклю- 
ченной функции Сеаг Туре, и вы поймете, почему эта 
возможность так важна. 


Есть еще и третий вид единиц измерения. Согласно 
спецификации С$5$, ключевые слова хх-зма11, 
меЯ1 им, х-1агде и некоторые другие тоже являют- 
ся абсолютными единицами. Однако все не так заме- 
чательно, как кажется; ни один метод не работает, как 
задумано. 


Пиксели и проблемы 


Согласно спецификации С5$$, единица измерения рх 
на самом деле является относительной. На этот счет 
существуют длинные и туманные рассуждения, свя- 
занные с длиной руки и углом зрения, но если в двух 
словах, то на 15-дюймовом мониторе с разрешающей 


ПРИМЕЧАНИЕ 


Если вы пользуетесь современной ОС, в которой есть механизм 
| сглаживания шрифтов, например Мас 05$ Х или МНидо\$ ХР (в. 
последнем случае нужно вручную включить функцию (еа Туре), 
то сможете без особого труда рассмотреть шрифты, использо- 
ванные в«Версии один» (рис.2и3), Если же сглаживание шриф- 
тов не реализовано, то для чтения текста придется приложить | 
усилия (рис. 4). Некоторые шрифты на удивление хорошо выг- 
лядят при малом кегле (примером может служить \егдапа), тог- 
да как другие становятся нечитаемыми. | 


Рис. 2 + Из-за сглаживания шрифтов в Мас 0$ Х текст 
«Версии один» выглядит хоть и мелким, но вполне читаемым 


Рис. 3 4+ Функция СеагТуре в МИпдом/$ ХР также справляется 
с задачей, хотя текст выглядит еще мельче 


Рис. 4 + В \\Мпдо\м$ ХР при отключенной функции С1еаг Туре 
читать «Версию один» трудно 


Теме 3$ 12 ра мА вазе 100%, 


| Таз ак 0. Зет зи Бако 300% 


Рис. 5 + Некоторые из многочисленных тестов Оуэна Бриггса, 
демонстрирующие различия в определении размеров в разных 
браузерах 


СОВЕТ 


Подробнее о тестах Оуэна Бриггса см. статью «Тех З12пд» по 
адресу ПЕр://НепооетсЧепте. сот/киопа[5/Бох_[е5оп/ 


гопу1паех. Вет. 


Единицы измерения _ 


способностью 1280х960 пикселей текст выглядит го- 
раздо мельче, чем на 21-дюймовом мониторе с разре- 
шающей способностью 800х600. Поскольку во втором 
случаешрифт с кеглем 10рх вполне различим, а в пер- 
вом - вряд ли, то эту единицу измерения нельзя счи- 
тать абсолютной в соответствии с данным ранее оп- 
ределением. 


Но если рх - относительная единица, то разве нельзя 
ее применить для точного контроля над опорным раз- 
мером шрифтов и позволить пользователю масшта- 
бировать заданные с ее помощью шрифты по соб- 
ственному желанию? Оно, конечно, так, только вот... 
ПуегпеЕ Ехр]огег для У/шт4о\$ не умеет масштабиро- 
вать единицу рх, так что на практике она становится 
абсолютной. Но, быть может, тогда ем или % решат 
все проблемы? Неторопитесь. Относительные едини- 
цы измерения тоже не идеальны. 


Точка отсчета 


Напомним, что относительные единицы измеряются 
относительно опорного размера. Но как его задать? 
Положившись на умалчиваемые значения в браузере. 
В большинстве браузеров в качестве опорного разме- 
ра берется 16 пикселей — для многих людей это много. 


Несогласованность 
и округление 


Отдать выбор точки отсчета на усмотрение браузера, 
может быть, и хорошо, если только вам не нужно, что- 
бы в разных браузерах дизайн выглядел примерно оди- 
наково, Хотя в большинстве браузеров и действует со- 
глашение о 16 пикселях, но в разных операционных 
системах и старых версиях браузеров различия ошелом- 
ляющие. Несколько лет назад дизайнер Оуэн Бриггс 
(Омтеп Впр8$) провел серию тестов и, собрав сотни сним- 
ков с экрана, доказал, что согласованность между отно- 
сительными единицами измерения -— не более чем не- 
сбыточная мечта (рис, 5). То же относится и к ключевым 
словам, определенным в спецификации С5$. Из-за этих 
расхождений долгое время считалось, что относитель- 
ными единицами пользоваться нельзя; 1ет могло рав- 
няться чему угодно в диапазоне от 12 до 16 пикселей. 


Различны не только точки отсчета, но и результаты 
масштабирования. Если 1ет равен 16 пикселям, то 
чему равен 0 , Зет? В одном браузере 14,4 пикселей ок- 
ругляется до 14, в другом -— до 15, 


№ ТипогЕ 


Сложные проценты 


Пользуясь относительными единицами измерения, 
легко загнать себя в угол. Рассмотрим следующий код: 
<@1\ 1а="БепеЕ1ев"> 
<В3>ВепеЕ1Е5</И3> 
<р>МПу рагЕ1с1раЕе? Гог гесоди1Етоп, 
зпзртгаетоп, апЯ а гезоостсе ме 
сап а11 геЕег со чНеп мак1па сне сазе Еог 
С55-Бавеа Чдезлай. ТЬ18 18 
зоге!у пеейдеЯ, еуеп сСодау.</р> 
</а1\> 


Если применить к нему показанную ниже таблицу сти- 
лей, то каков будет размер текста внутри абзаца в пред- 
положении, что 100% - это 16 пикселей: 
#БепеЕ1ев { 
ГопЕ-512е: 75%; 
} 


р { 
Ропе-в12е: 75$; 


} 


Что у вас получилось: 9 или 12 пикселей? Правиль- 
ный ответ - 9. Первое правило уменьитает размер 
шрифта внутри раздела #ЪепеЁ1Ез на 75%, то есть 
до 12 пикселей. Второе правило наследует это значе- 
ниеи уменьшает его еще на 75%, в результате получа- 
ется шрифт высотой 9 пикселей. 


Эта схема вычисления сложных процентов приводит 
в недоумение, когда применяется неосознанно и без 
проверки; сделайте несколько таких итераций - и текст 
станет вовсе нечитаемым, Особенно от этого страда- 
ют старые браузеры, например Пмегпе! Ехр|югег для 
МасииозВ: с каждым применением относительных 
единиц к вложенным элементам текст становится все 
меньше и меньше (рис. би7). 


[2] ТЬе Ноад то Еппопллег 


Ицептпо а дагк апд Огеагу го; 
ОР Пгомизег-5ресЯс 1295, МСО! 
Бгокеп С$5$ зирроп. 


Тодау, ме тих Сеаг пе п 
Меб епйомМептепи Раз Бееп 
Ме |6ге|е55 еЙо$ ог ток ПКе 


Рис. 6 + В современном браузере размер текста кажется 
приемлемым... 


2] Тлероад о ЕпПаглеги 


иНейпо а Чак 
СРО етГ 


агн? Этеагу РОС | 
рес с Заз, пеоглраные | 


АУМ 


ТеЧау, ме мия Чел ме ти9 


египте Вах Беел аспеме9 Мы 
сё ЧАК ке че НЯС, ИЗ 5Р ао9 Мел 


Рис. 7 + ..а в более старом из-за перемножения 
коэффициентов текст плохо читается 


В сети есть много рекомендаций, основанных на здравом смыс- 


| ле, например на сайтах МахОезтапт (ммм. тахдезапт.сот,аи/ 
ргезеп{аНоп/те[а уе), с5$-9156455$ (ПЁр://с5$-91$615$$. 


ттсиНо.сот/?раде=Роп12е) и [Луе 1пю АссезяфИИу (ВЕЕр:// 
ФуеттоассезЫШу.ога/дау_26_из1пд_ге{а\е_РопЕ_$12е. Ат). 


Масштабирование шрифтов 


Разумное 
масштабирование 
шрифтов 


Итак, все методы задания размера шрифта порожда- 


ют те или иные проблемы, Так что же делать бедному 


веб-дизайнеру? Похоже, задание размера в пикселях — 
самый простой выход для дизайнера, зато доставляет 
максимум неприятностей пользователю. Существует 
три надежных способа, и у каждого из них есть плюсы 
и минусы. 


Метод ет 


После того как Оуэн Бриггс представил миру свои 
снимки с экрана, он обнаружил, что при задании раз- 
мера шрифта с помощью процента самых очевидных 
оптибок округления удается избежать. Если в элемен- 
теБоду указать процентное значение, а во всех осталь- 
ных местах единицу ем, то размер вычисляется при- 
близительно одинаково во всех браузерах: 

Боау { 

ГопЕ-5126е: 76%; 
} 
р + 


Еопе-э12е; 1ещ; 
} 
Бриггс предлагает именно такие значения и рекоменду- 
ет не употреблять для масштабирования текста на стра- 
ницекоэффициент ниже 1 ем. В результате шрифт внут- 
ри элемента р будет иметь высоту примерно 12 пикселей 
при условии, что по умолчанию в браузере предполага- 
ется кегль 16 пикселей, Для большей части людей это 


Е 192) Типография Аа | рык 


зил 


достаточно комфортно, а в случае чего относительность 
единиц измерения позволит изменить масштаб. Указан- 
ный метод подробно описан: на личном сайте Бриггса в 
статье «бапе С5$ у1хез» (мили дВепооештсептт.сого/ 
пцопа6/гуроетарну/ ш4ех.Вт]), Ахиллесовой пятой этой 
техники является предположение о том, что браузер по 
умолчанию принимает кегель 16 пикселей. Для боль- 
шинства браузеров так оно и есть, но если пользователь 
изменит стандартное значение, то это отразится и на мас- 
штабировании. 


Метод на основе 
ключевых слов 


Самые серьезные проблемы при задании размера 
шрифта с помощью ключевых слов возникают в брау- 
зере Ицегпе! Ехр]огег 5 для МПадом. Если забыть о нем, 
то этот метод дает достаточно согласованные резуль- 
таты и в большинстве остальных браузеров работает 
надежно. Так что, отфильтровав Пиегпе! Ехр|огег 5 для 
УЛадом$ с помощью трюка, связанного с моделью пря- 
моугольных областей (Вох Моде! НасК), ключевыми 
словами пользоваться все-таки можно: 
Бобу { 
Ропе-51те: х-вта11; 
у\уо1се-Еам11у: "\"}\"!"; 
ус1се-бам11у: 1пНегте; 
Еопё-в12е: вта11; 
} 
Вом1>БоЧу { 
ЕопЕ-512е: вма11; 
} 


Предполагается, что при переходе от одного ключевого 
слова к соседнему действует масштабный коэффи- 
циент 1,2. Таким образом если среднее значение соот- 
ветствует 16 пикселям, то приведенное выше объяв- 
ление даст размер примерно 13 пикселей. 


ПРИМЕЧАНИЕ 


| Трюк с моделью прямоугольных областей в (55 позволяет 
применить специальный стиль только в ГипбетпеЕ Ехр(огег 5 
для МЛпдо\$. Он был придуман для обхода дефекта реализа- 
ции этой модели, характерной исключительно для данного | 
браузера, но применяется и в других ситуациях, в том числе 
| для задания размера шрифтов. Подробнее см. на странице 
НЕЕр://батеК.сот/С$5$/Ехатр/е5/ Бохтойе[Васк. Ат, 


ПРИМЕЧАНИЕ 


Детальное описание того, что именно делает приведенный выше 
код, можно найти на странице НЁр://ФуетоассеЬ\Иу.ога/ 
дау_26_и51пд_геа\е_Роп®_$1е. Пели. 


` ПРИМЕЧАНИЕ 


Бе: Могкта м АКегпа{е $5(е Нее» (млмм. ай ${араг.сот/ 
аптс(ез/аКегпа{е). 


7 Зак. 1942 


Описание метода Пола Соудена приведено в статье «А{егпабуе 


Так какой метод выбрать? 


Метод переключения 
таблицы стилей 


Для точного контроля над экранными шрифтами луч- 
ите всего пользоваться единицей измерения рх. Вооб- 
ще-то полагаться на нее опасно, но существует спо- 
соб обойти ошибку в ИциегпеЕ Ехр|огег, создав вторую 
таблицу стилей с большим размером шрифта. 


Методы переключения таблиц стилей встроены в не- 
которые браузеры, но не в ИцегпеЕ Ехр]огег для 
УИпадом 5. Поэтому были разработаны программные 
способы восполнения этого недостатка, с помощью 
которых пользователь может взять управление в 
свои руки. Наиболее известен оригинальный метод 
Пола Соудена (Раш 5ом еп), опубликованный на 
сайте А 11%{ Арам. С его помощью можно модифи- 
цировать не только шрифты, он доказал свою эф- 
фективность в построении средств настройки сайта 
с помощью экранных элементов управления, добав- 
ленных дизайнером. 


Так какой метод выбрать? 


На каком же из трех этих методов лучше остановить- 
ся при работе над своим проектом? Дело вкуса. У по- 
сетителей, заходящих на сайт, зрение может оказать- 
ся похуже, чем у дизайнера Дидье Хильхорста, но если 
вы тщательно подойдете к выбору метода задания раз- 
меров шрифта, то они не станут на это сетовать. 
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Дизайнер Майкл Пик (Мтспае! Р1скК) 
ум. с$52епдаг4епт.сот/009 


_ ЖИВЫМ 
| ИЛу мертвым 


Изящество и притяжение в типографском дизайне 


вена ани 


Размышляя над тем, что представить на сайт 
С$$ Геп Саг4еп, Майкл Пик решил сделать 
«что-нибудь забавное и немного странное». Так 
и появилась работа «Живым или мертвым». 


Идея Пика состояла в том, чтобы противо- 
поставить дикий Запад миру японского са- 
мурая, показав занимательное историческое 
различие. На тему дикого Запада намекает 
типография в стиле вестернов с различны- 
ми специальными символами. С точки зре- 
ния типографских особенностей получился 
очень интересный результат, проливающий 
свет на проблему, как надо использовать 
шрифты в дизайне. 


\‘"А:А-А-А=АА:: 
Хх? ТА@® 
ат“ 
45%$449“ 454 


Рис. 1 + Специальные шрифты обычно создаются для какой-то 
одной темы 
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Рис. 2 + Декоративный логотип в дизайне «Живым или мертвым» 
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Рис, 3 + Заголовки в списках ссылок стилизованы с 
использованием звезд и специального символа-разделителя 


А 


ТНЕ ВОАО ТО ЕМТОНТЕХМЕАТ 


Рис. 4 + В верхнем заголовке изображены самураи и бонсай 


50 НАТ 13 ТН1$ АВОПТ ? | = 


Рис. 5 + Дополнительные заголовки выдержаны в стиле вестерна 


Декоративные символы 


Декоративные символы 


Один из самых любопытных визуальных аспектов 
работы «Живым или мертвым» является использова- 
ние декоративных типографских символов, получив- 
ших собирательное название терав («итучки-дрюч- 
ки»). Традиционно это были цветочки или элементы 
орнамента, а в цифровом мире они подбираются по 
темам, например: 


+ бизнес; 

+ спорт; 

+ животные; 
+ природа; 
+ разное. 


На рис. 1 показаны примеры символов на пять раз- 
ных тем. 


Пик сумел подчеркнуть тему вестерна в своей работе 
специальными символами и графическими украше- 
ниями, поэтому дизайн получился изощренным и 
искусным. 


Прежде всего бросается в глаза заголовок (рис. 2). 
Шрифт, вызывающий ассоциации с диким Западом, 
сочетается с изображением пагоды, которая помеще- 
на в овальную область, обрамленную причудливыми 
завитушками. В результате получается тематический 
контраст между диким Западом и древней Японией. 


Пятиконечная звезда, то есть звезда шерифа, хорошо 
знакома по фильмам-вестернам. В списках ссылок за- 
головки обрамлены такими звездами и отделены спе- 
циальным шрифтовым символом (рис, 3), 


Перемещаясь вниз по основному тексту, мы обнару- 
живаем дополнительные украшения. Во-первых, в 
верхней части видны изображения фигур самураев и 
дерево-бонсай (рис. 4). 


В последующих заголовках доминирует тема дикого 
Запада, подчеркнутая стилизованным изображением 
указающего перста (рис. 5). 


Для усиления впечатления применены еще два деко- 
ративных элемента, Вдоль верхнего и нижнего края 
размещен красивый узор, напоминающий о банкно- 
тах и сертификатах акций (рис. 6). И наконец, почто- 
вый штемпель с доменным именем тщерсК.сот слу- 
жит тонким украшением с толикой юмора (рис. 7). 


11: Типография 


Не будь на странице специальных символов и графи- 
ческих украшений, осознать тематический контраст 
было бы непросто. На этом примере видно, как ди- 
зайнер может с помощью удачно размещенных деко- 
ративных элементов подчеркнуть свою идею. 


Типографская верстка 


Говоря о верстке, мы прежде всего имеем в виду раз- 
мещение различных элементов на странице, На эту 
тему существует много как научной информации, так 
и всяческих шуток. 


Оптическое восприятие 


Человеческий глаз воспринимает текст очень специфи- 
чески. Типографы советуют дизайнерам строить свои 
работы в соответствии с механизмами человеческого 
зрения и не пытаться делать что-то, противоречащее 
естественной реакции на слова. Единственное исклю- 
чение из этого правила — когда дизайнер сознательно 
хочет вызвать необычную реакцию. Во всех остальных 
случаях важно учитывать оптическое восприятие. 


В языках, читаемых слева направо, взгляд следует в 
определенном направлении с самого начала страни- 
цы. Это верно и для печатных, и для веб-страниц. 


Втипографии преобладает теория, что взгляд естествен- 
но тяготеет к левому верхнему углу, который называют 
главной оптической областью. Затем взгляд движется 
вправо, спускается вниз на следующую строку и так да- 
лее до конца страницы. В конечном итоге взгляд упира- 
ется в так называемый финальный анкер — самую ниж- 
нюю точку в дизайне, В идеале, в макете, предназначенном 
для практического, а неэкспериментального применения, 
такой характер оптического восприятия должен учиты- 
ваться, и разрушать его не следует (рис. 8). 


Использование притяжения 
для направления взгляда 


Процесс направления взгляда вниз называется приия- 
жением (ртауцу). Как сила тяжести физически тянет 
нас вниз, так и взгляд притягивается к области есте- 
ственного завершения дизайна. 


зная это, вы не станете удивляться тому, что логотип 
обычно помещают в главной оптической области (ле- 
вом верхнем углу), а текст и элементы дизайна, созда- 
ющие финальный анкер, располагают внизу. По пути 
из одной точки в другую встречаются «горячие точ- 
ки» — обычно там, где взгляд останавливается перед 


Рис. 6 + Этот повторяющийся узор создает некую интригу 
(изображение увеличено) 
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Рис. 7 + Почтовый штемпель выступает в роли водяного знака 
(изображение затемнено) 


ПРИМЕЧАНИЕ 


Конечно, в языках, читаемых не слева направо, оптическое 
восприятие иное. В иврите или арабском, которые читают- 
ся справа налево, логично предполагать прямо противопо- 
ложное направление взгляда: из правого верхнего угла по- 
перек и вниз, 
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оптическая | е 
ОСЬ Взгляд скользит 
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скользит слева направо, 
егда вниз, напрваляясь 


к\финальному анкеру 


Рис. 8 + Схема оптического восприятия при чтении страницы 


Рис. 9 + Шаблон верстки, не противоречащей оптическому 
восприятию 
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Рис. 10 + В работе «Живым или мертвым» заголовки не содержат 
иных знаков препинания, кроме единственного вопросительного 
знака. В сочетании с указующим перстом они помогают направить 
взгляд читателя к следующему фрагменту текста 


Как избежать непонимания. 


тем, как перейти в левую часть страницы. Шаблон, 
идеально соответствующий такой модели, представ- 
лен на рис. 9. Работа «Живым или мертвым» дает пре- 
красный пример дизайна, в котором взгляд не встре- ‚, 
чает препятствий естественному движению. 


Как избежать непонимания 


Другая проблема, возникающая в типографии, — как 
добиться того, чтобы человек правильно понял смысл 
выраженной словами информации. Как и раньше, эк- 
спериментальный дизайн может представлять исклю- 
чение из правила: скажем, сообщение может быть за- 
ложено в эмоциональной реакции на некий образ, а 
не в словесном содержании. 


Заголовки 


Разумеется, заголовки призваны отделить друг от друга 
разделы документов. В работе «Живым или мертвым» 
мы видим, что заголовок может еще и нести дополни- 
тельный смысл, усиливая впечатление от дизайна. 


Вот некоторые рекомендации по эффективному ис- 
пользованию заголовков: 


+ если вы используете в заголовках цвет, то это дол- 
жен быть самый заметный цвет в палитре; 


4$ цвет заголовка должен быть энергичным. Исследо- 
вания подтверждают, что светлые заголовки не ока- 
зывают такого воздействия, как темные. Чем бли- 
же цвет заголовка к черному, тем сильнее он 
воздействуют зрителя; 


$ чем значимее заголовок, тем он должен быть замет- 
нее; 


4$ слегка зауженный шрифт заголовка делает его бо- 
лее заметным, Иногда рекомендуют устанавливать 
плотность на уровне 70-90%; 


+ полезны бывают шрифтовые контрасты. В работе 
«Живым или мертвым» все заголовки набраны за- 
главными буквами, что выделяет их на фоне про- 
чего текста, 


+ заголовки должны быть короткими. Слишком 
длинный заголовок выглядит неприятно и может 
быть непонятен читателю. 


Еще один интересный фактор, который нужно учи- 
тывать в дизайне заголовков, — это воздействие зна- 
ков препинания, в особенности точек. Вообще говоря, 
следует избегать точек в конце заголовков. Точка сим- 
волизирует завершение мысли, тогда как смысл заго- 
ловка — начать новую мысль (рис, 10). 


|: Типография 


Основной текст 


Основной текст занимает большую часть страницы. 
Предполагается, что посетитель будет его читать или 
хотя бы бегло просмотрит. Но следование сложившей- 
ся типографской практике может уменьшить доход- 
чивость сообщения. 


Для эффективной работы с основным текстом при- 
держивайтесь следующих рекомендаций: 


+ Старайтесь, чтобы строка состояла примерно из 
60 символов. В текучем мире веб-дизайна это не 
всегда легко обеспечить, особенно из-за не всегда 
корректной реализации свойств С5$, управляю- 
щих длиной строки, к примеру, мли-итасв и 
пах-м1 ЕН. Однако это следует иметь в виду, даже 
при текучем дизайне. Если строки слишком длин- 
ные, то их смысл становится труднее понимать. 
Более того, человек вообще может отказаться от 
чтения текста! 


+ Верно и обратное. Восприятие смысла падает и при 
слишком коротких строках, порядка 20 символов, 
Просто трудно читать длинные и узкие фрагмен- 
ты текста. Короткие строки лучше применять для 
акцентирования внимания. 


+ Ванглоязычных текстах принято считать, что абзац 
должен состоять по меньшей мере из трех-четырех 
предложений. В У’еЬ длинные абзацы не приветству- 
ются, считается, что короткие абзацы, содержаццие 
действительно важную информацию, больше под- 
ходят для среды, в которой одного щелчка достаточ- 
но, чтобы покинуть страницу. 


+ Публикуя длинные документы, старайтесь, чтобы 
абзацы были насыщенными и короткими, разби- 
вайте документ на разделы с помощью заголовков. 
Это, безусловно, способствует улучшению смысло- 
вого восприятия, поскольку читателю становится 
легче ориентироваться в документе. 


+ Избегайте слишком широких и слишком узких 
межстрочных интервалов. Если абзац слишком 
близко или слишком далеко отстоит от предшест- 
вующего и последующего текста, восприятие его 
смысла ухудитается. Мозг просто перестает обра- 
батывать информацию либо из-за перегрузки, либо 
считая, что сообщение закончилось. 


+ По большей части старайтесь не использовать раз- 
ные цвета в основном тексте, Как и в случае заго- 
ловков, раскраска текста иногда приносит больше 
вреда, чем пользы. Применяйте цвет только для ак- 
центирования внимания и для выделения ссылок. 
В работе «Живым или мертвым» даже в ссылках 
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Рис. 11 + Вариация цвета для ссылок внутри основного текста 
(дизайн «Живым или мертвым») 


применяется только небольшая вариация оттенка, 
да и то лишь в тех, что находятся в основном тек- 
сте (рис. 11). 


Акцентированный текст 


С акцентированным текстом можно позволить чуть 
больше вольности, чем с заголовками и основным тек- 
стом, которые наиболее критичны для уяснения сути 
информации. Акцентированным называется текст, 
расположенный по бокам, в виде цитат и подписей. 
Для работы сакцентированным текстом имеются сле- 
дующие рекомендации: 


+ Поскольку смысл акцентированного текста в том, 
чтобы отвлечь внимание от основного, то приме- 
нение цветов даже поощряется. Главное — быть по- 
следовательным в использовании цветов. 


+ Акцентированный текст должен занимать всего 
несколько строчек, причем сами строки лучше де- 
лать более короткими. 


+ Акцентированный текст, размещенный на полях 
или в виде цитат, должен не прерывать поток ос- 
новного текста, а Дополнять его, Если он нарушает 
оптическое восприятие, то становится сложнее по- 
нять смысл основного текста. То же самое относит- 
ся и к иллюстрациям - они должны не прерывать 
основной поток и отвлекать от текста, а служить 
естественным дополнением, 


+ Читатель ожидает, что под иллюстрацией будет 
подпись. Подписи очень полезны, поскольку до- 
полняют контекст и помотают лучше усвоить ма- 
териал. 


Решая вопрос о том, сколько текста может быть на 
одной странице, следует сообразовываться с практич- 
ностью, По большей части, люди не любят щелкать 
по ссылке «Далее» чаще, чем необходимо. Поэтому 
нужно соблюсти тонкий баланс: оставить на страни- 
це не слишком мало и не слишком много текста. 


Продуманные шрифты, 
изящный дизайн 


Дизайн работы «Живым или мертвым» выглядит изящ- 
но благодаря тому вниманию, которое Майкл Пик уде- 
лил мелким деталям и удачно подобранным украше- 
ниям в виде символов из фантазийных шрифтов, с 
помощью которых высвечены интересные грани. До- 
бавьте кэтому твердое следование типографским прин- 
ципам, и вы поймете, что в основе выразительности 
работы лежит тонкая, но ясно ощущаемая простота. 
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Дизайнер Дэйв Ши (Вауе 5Веа) 
ммиии!.с$52епдагдеп.сот/005 


Жажда крови 


Исследование возможностей форматирования 


‚ Иногда для продвижения вперед приходится 


пользоваться воспоминаниями из прошлого. 
Работая над хаотической «Жаждой крови», 
Дэйв Ши обратился к футуристическому ис- 
кусству начала двадцатого века. Была постав- 
лена цель соединить элементы прошлого с 
современной технологией. 


Основу образного ряда составили фотографии 
из личного архива Ши. В сочетании с несколь- 
кими маскированными слоями получилась 
двухцветная репродукция, напоминающая 
шелковые трафареты, которые часто приме- 
нялись для графического дизайна в прошлом. 
В очень ограниченной цветовой палитре ис- 
пользуются только черный, красный и белый 
цвета. Чтобы подчеркнуть резкость, он оста- 
вил на всех изображениях контуры, отказав- 
шись от сглаживания неровностей. А восполь- 
зовавшись сглаживанием переходов (АНБеппе) 
в формате СТЕ, он сумел тонко намекнуть на 
возможности современной технологии. 
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Рис. 1 + Пример футуристического дизайна, 
художник Ф. Т. Маринетти «[е5 ло еп Пейе иг ${$5» (1919) 


ПРИМЕЧАНИЕ 


В типографии цветом называют не оттенок краски, а зритель- 
но воспринимаемый общий тон фрагмента текста. Соотноше- 


напечатана, зависит прежде всего от контраста; без контрас- 
та текст будет нечитаемым. Побочным продуктом этого соот- 
ношения является тот факт, что промежутки — между штри- 
хами литеры, между буквами внутри слова, между словами в 
строке и между строчками — зависят от толщины шрифта и 

величины межбуквенных и междусловных интервалов. 


ние между формой литеры и поверхностью, на которой она | 


Возможности форматирования 


Задание настроя 
с помощью типографских 
эффектов 


Беспорядочность, ощущаемая в «Жажде крови», спе- 
циально подчеркнута организацией текста; абзацы 
позиционированы и отформатированы по-разному, 
что создает впечатление хаоса. Применение различ- 
ных гарнитур широко практиковалось дизайнерами- 
футуристами, при этом текст специально размещал- 
ся так, чтобы создать максимальный зрительный 
дискомфорт (рис. 1). 


Чтобы добиться чего-то необычного в «Жажде крови», 
понадобилось разместить абзацы так, чтобы они обте- 
кали друг друга и заполняли страницу беспорядочным 
образом. С точки зрения удобства чтения такая орга- 
низация материала далека от идеала, но, возможно, вы 
заметили интересный эффект: межбуквенные интерва- 
лы и плотности шрифтов различаются, из-за чего раз- 
ные параграфы имеют разные оттенки. На рис. 2, где 
изображение слегка размыто, чтобы скрыть отдельные 
литеры, влияние плотности шрифта отчетливо видно. 


В данной работе наибольший интерес представляет 
случайно меняющийся цвет шрифта. Изменяя меж- 
строчные интервалы, поля и гарнитуру шрифта, 
можно добиться разного восприятия сообщения. 
Какой из фрагментов, представленных нарис. 3, лег- 
че читать? Решив поиграть типографскими эффек- 
тами в собственном проекте, не упускайте из виду 
эти соображения. 


В большинстве случаев цель дизайна -— последователь- 
но выдержать один и тот же цвет во всем основном тек- 
сте. В С55$ не так много средств, позволяющих решить 
эту задачу. Но, хотя забывать о ней не следует, есть и 
более важные вещи —к примеру, четкость и длина строк. 


Возможности 
форматирования 


В «Жажде крови» широко используются различные 
средства форматирования текста, имеющиеся в С55, 
помимо таких основных, как задание размера и гар- 


нитуры шрифта. 


ЗУ] Типо! ›зафия 


В спецификации С$5, а равно в многочисленных кни- 
гах и руководствах по этой теме, вы найдете техни- 
ческую информацию по каждому свойству, но ниче- 
го по поводу их применения в практическом дизайне. 
Некоторые включенные в С$$ свойства тлубоко кор- 
нями уходят в основные принципы графического ди- 
зайна, но из технического руководства вы об этом ни- 
когда не узнаете, 


Ниже будут описаны наиболее распространенные свой- 
ства, относящиеся к форматированию, их происхож- 
дение и возможные способы применения. Некоторые 
свойства (к примеру, ЕопЕ-Еам11у, Еопе-вуде, 
ЕопЕ-зсу1еи ЕопЕ-мезаНеЕ) опущены, так как под- 
робно рассматриваются в других разделах книги. 


Применение стилей к тексту 


Описываемые в этом разделе свойства позволяют за- 
давать формат вплоть до уровня отдельного символа, 
В большинстве случаев у шрифта должен быть пре- 
допределенный вариант, соответствующий выбранно- 
му стилю. Знакомство со списком шрифтов, установ- 
ленных на вашей машине, может пролить свет на то, 
какие варианты есть у каждого шрифта. 


Свойство Юп{-уапат" 


У этого свойства одно-единственное назначение - ото- 
бразить текст маленькими заглавными буквами. Вы- 
сота первой буквы каждого слова остается обычной, а 
весь остальной текст печатается маленькими заглав- 
ными буквами. 


Свойство может принимать одно из двух значений: 
погма]1 и зма1]1-сарз. У большинства шрифтов 
варианта с маленькими заглавными буквами нет, по- 
этому браузер просто уменьшает размер обычных за- 
главных букв. Поэтому сделанное выше замечание о 
предопределенных вариантах шрифта к свойству 
Еопе-уаг1апе не относится: 


Пример использования Еопе-уаг1апе: 


ваотскЭшитату р { 
ЕопЕ-уагтапЕе: зма1]-сарз; 


} 
Как выглядит результат: 
Тре Веашу оЁС5$ Резри 


А РЕМОНУТЕАПОМ ОР МНАТ САМ ВЕ АССОМРИЗНЕЙ 
вилы тнвосон С55-плзкр оезтом, ЗЕГЕСТ АМУ ЭТУБЕ 
ЭНЕКТ КОМ ТНЕ Ы9Т ТО ЦОАС ЕР ТО ТН РАБЕ, 


ТилмичьдАО ТНЕ ВАМРЫЕ НТБ ЕЩЕ АМС 255 РЕ 


Рис. 2 + После размывания становится видно, что у блоков 
текста разные оттенки 
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Рис. 3 + Примеры разного цвета шрифта 


ПРИМЕЧАНИЕ 


Цветной вариант рис. 2 и 3 см, на вкладке. 


СОВЕТ 


В спецификации ($5 приведено даже больше деталей о каж- 
дом свойстве стилизации шрифтов; см. раздел «15 Ропё5» на 
странице ммм. м3.отд/ТА/ВЕС-С$$2/ Гоп 5. тот -$УЙ пд. 


У каждого из обсуждаемых свойств есть также значение 
1 пнег1е. Оно заставляет браузер применить то же значение, 


что действует для родительского элемента. Это относится ко 
всем свойствам (5$, поэтому мы не будем упоминать его явно. 


Возможности форматирования 


Свойство Тех{-{гап5Югт 


Как и ЕопЕ-уаг1апь, свойство Сехе-сгапзЕогм 
позволяет более точно управлять преобразованием 
строчных букв в заглавные. Оно может принимать 
следующие значения: сар16а112е, пррегсазе, 
1омегсазе и попе. 


Значение сар1са112е преобразует в верхний регистр 
первую букву каждого слова, оставляя все прочие без 
изменения; значение пррегсазе преобразует все бук- 
вы в верхний регистр, 1омегсазе переводит все бук- 
вы в нижний регистр, а попе не имеет видимого эф- 
фекта. 


Пример использования СехЕ-ЕсгапзЕоги: 


ваитскбиттату р { 
сехЕ-сгапзЁогш: иррегсазе; 


} 


Как выглядит результат: 


ТВе Веашу оЁ С$5 Пезриа 


А РЕМОМ$ТКАТ!ОМ ОР У/НАТ САМ ВЕ 
АССОМРИБЗНЕР \Л50АШХ ТНВООСН С55- 
ВАЗЕО ОЕЗТОМ. ЗЕТЕСТ АМУ ЗТУЦЕ ЗНЕЕТ 
ЕВОМ ТНЕ Ы$Т ТО 10 Ар ТТ ТМТО ТН1$ РАСЕ, 


Свойство 1ех{-аесогаНоп 


С самого момента зарождения Всемирной паутины 
гиперссылки подчеркивались, свойство же сехе- 
ЧесокаЕ1оп позволяет управлять подчеркивани- 
ем и другими эффектами не только для ссылок, но 
и для любого другого текста. Допустимые значения: 
попе, ипаеу11пе, омег11пе, 11пе-ЕНгоцои и 
Ь11пК. Значение попе не имеет видимого эффекта, 
ипдег11пе добавляет линию снизу (подчеркива- 
ние), оуег 1 1пе - линию сверху (надчеркивание), 
11пе-ЕНгопоай - линию поперек текста (перечер- 
кивание), а 51 1пК вызывает мигание. 


Наверное, сехЕ-аесохае1 оп является самым про- 
тиворечивым из всех свойств форматирования текста, 
поскольку может вызывать раздражение у читателя. 
Чтобы избежать этого, придерживайтесь следующих 
рекомендаций: 


+ попе -—подразумевается для большинства элемен- 
тов; значение имеет смысл задавать явно, только 
если оно отлично от попе. 


+ ппает13те — применяйте только для гиперссы- 
лок. Если текст подчеркнут, но не является гипер- 
ссылкой, то пользователь будет введен в заблужде- 
ние. Сколько раз вы сами пытались щелкнуть по 


| 204. Типография Н» | | 


подчеркнутому тексту, не являющемуся ссылкой: 
В типографии у подчеркивания другой, более тра- 
диционный смысл: так, например, выделяют назва- 
ния книг, но наличие гиперссылок внесло свои кор- 
рективы; 


+ оуег11пе - в математике надчеркивание приме- 
няется для обозначения средних величин, но боль- 
ше оно почти никогда не используется; 


+ 11пе-ЕРгочцавВ - применяйте перечеркивание 
только для выделения текста, который потерял ак- 
туальность в контексте объемлющей страницы и 
вообще-то заслуживает изъятия, но по какой-то 
причине все же оставлен. В идеале любой вычерк- 
нутый текст должен сопровождаться более новым; 
хорошим примером применения могут служить 
системы учета исправлений и ведения версий; 


+ Ъ11пКк-если у вас нет абсолютной необходимости 
имитировать мигающий таймер видеомагнитофо- 
на, считайте, что значения 611пК не существует. 
На заре развития \\еЬ тегом <511пК> чрезмерно 
злоупотребляли, а сегодня не каждый браузер под- 
держивает его эквивалент в С$$, 


Пример использования КехЕ -сгапз Роги: 


фаи1скбиттаку р { 
сехЕ-Яаесогае1оп: 11пе-ЕБкочаН; 
} 


Как выглядит результат: 


Те Веашу оЁС$$ Реза 


Управление промежутками 


Выше мы видели, как контраст между литерами и 
фоном влияет на восприятие текста. Промежутки —это 
мощный визуальный инструмент, а благодаря разви- 
тым возможностям форматирования в С$$, ими еще 
и легко управлять. 


Свойство |1те-пездРЕ 


В прошлом типографы отделяли строки друг от друга 
полосками мягкого свинца (]еа4), отсюда и поныне 
существующий английский термин [еа4те для обозна- 
чения межстрочного интервала, или интерлиньяжа. 


ПРИМЕЧАНИЕ 


Известный типограф Фредерик Гауди (Егедепск боиду) однаж- 
ды сказал: «Всякий, кто изменяет межбуквенный интервал, 
способен украсть овцу». Пользуйтесь свойством 1еЕсег- 


ными в угоне домашнего скота! 


зрас1п9а с осторожностью, если Не хотите быть обвинен- 


Возможности форматирования 


С$5 позволяет управлять величиной этого интервала 
с помощью свойства 11пе-Пезайе. Допустимо зада- 
вать его значение в абсолютных и относительных еди- 
ницах, указывая длину, процентное отношение или 
ключевое слово 1пНекте, 


Отметим, что для значения свойства 11пе-Незаве 
явно задавать единицу измерения необязательно. Зна- 
чение 1.2 -— это то же самое, что 1.2ем или 120%; 
если единица не задана, то считается, что к тексту при- 
меняется коэффициент масштабирования, а не абсо- 
лютный размер. 

Пример использования 11пе-пезаНе: 

#аатскбипмагу р { 


11пе-Нелаве: 0.8; 
} 


Как выгл ядит результат. 


ТВе Веащу 07 С$$ Безри 


ига ео во 
а < то юад И о рае уе 
Полит оа4 {Не ватар!е Шли бе ап с53 бе 
"ТЪе Коза то Ее ептети 


Свойство [е[ег-зрастд 


Межбуквенный интервал можно регулировать с по- 
мощью свойства [еНег-5расте. Оно может принимать 
значение погтла! или задаваться в виде длины проме- 
жутка, добавляемого к стандартному расстоянию меж- 
ду буквами. 


Из-за низкой разрешающей способности экрана из- 
менять межбуквенный ‘интервал в основном тексте 
можно только с довольно большой дискретностью, а 
это выглядит по-любительски. Поэтому наиболее ра- 
зумно применять свойство 1 ес сег-зрас1па в заго- 
ловках и небольших фрагментах текста. 


Пример использования 1ессег-зрас1по: 


#аатскоилмагу р { 
1еЕсег-врас1пд9;: 0.1ем; 
} 


Как выглядит результат: 


ТВе Веащу оЁС$$ Безри 


А Четопз(таНоп оЁмВаЕ сап Бе 
ассотрИзвей \15 ца Пу (ПгоцЕН С$5-Базед 
Чезщи. Зе]ес! апу в уе эБее! гош Ше Н 1 
то 1029 И 11 (1 раре. 


Ромпоай пе затр\е мл Ве пиё св 


Свойство мгогд-5растд 


Как и ]1ессег-зрас1па, свойство мога-зрас1пд 
позволяет регулировать промежуток, только не меж- 
ду буквами, а между словами. Допустимые значения: 
погта1, длина, процент или ключевое слово 1ппег1е. 


На применение свойства мога-зрас1па браузером 
влияют и другие факторы, в том числе выравнивание 
(задаваемое свойством СехЕ-а]1191) и свойство 
ирй1Ее-зрасе. 


Пример использования иога-зрас1по: 
#аи1скбиммагу р ( 
"ога-врас1п9: 1ем; 
Как выглядит результат: 
ТВе Веащу 0Ё С$5$ Дези 


А Чатопенацопй о эВаг сап № 
ассотпрИзНе#  мвцаЙу гомен  С$5-Ъазей 
дери. Зее впу Ме  впее бот Ме 
33: № 109 К тю 15 рае. 


Свойство 1ех{-аПоп 


Это свойство позволяет отцентрировать или произ- 
вести выключку текста, а также выровнять его по пра- 
вому или левому краю объемлющего элемента, До- 
пустимые значения: 1еЕС, гтанс, сепсег и 
ист у. 


Поскольку браузер выполняет выключку автоматичес- 
ки, то традиционные приемы предотвращения неприг- 
лядных пустот - к примеру, перенос слов — неприме- 
нимы. Выключка с помощью С55 часто приводит к 
ситуации, изображенной на рис. 4. Из-за отсутствия 
точного контроля мы рекомендуем ограничиться вы- 
равниванием по левому или правому краю. Центриро- 
вание может найти применение в заголовках и неболь- 
ших фрагментах текста, например цитатах, но лучше 
не прибегать к нему для форматирования текста, дли- 
на которого превышает пару строк. 


А Четопзхгабоп оЁ уфа! 
сай Бе — ассотрИзНеа 
узиаПу гоирН С$5$-Базе4 
4ез1рп. З@есЁЕ апу $Ше 
зНее! гот Ще 11$ 10 1оа@ И 
111о 1$ раре. 


Рис. 4 + Отсутствие переносов в текстовых блоках приводит 


к большим межсловным пробелам 


Соблюдайте мер 


Пример использования сехе-а119дп: 


#фао1тскбитмаку р { 
сехе-а1101: стане; 
} 


Как выглядит результат: 


ТЬе Веашу оЁ#С$$ Дези 
А детюпабла Нот обмВах сап Бе ассоторИзед 
узцаПу гоцев С$5-Бавед дез. ЗаесЕ апу зе 
зНееЕ бота фе 5 10 10а # {тио 48 раре, 


Полушоай Не затпр\е 0 бе ап с35 б]е 


Соблюдайте меру 


Безоглядное применение произвольных комбинаций 
свойств шрифта, может быть, и неплохо смотрится в 
хаотическом дизайне «Жажды крови», но вообще-то 
тексты, публикуемые во Всемирной паутине, предназ- 
начены для чтения, а не для того, чтобы зритель вос- 
хищался мастерством художника. Если пользоваться 
предоставляемыми С$5$ возможностями для формати- 
рования текста умеренно, то можно повысить четкость 


и доходчивость страницы, 


Дизайнер Дуглас Боумен (Боид(аз Вомутап) 
уимим.с$52епдаг4епт.сот/017 


Золотая 
середина 


Сочетание метода и творческого подхода 
при создании типографского баланса 


Работая над своим вкладом в копилку сайта 
С$$ Сеп Саг4еп, дизайнер Дуглас Боумен по- 
нял, что хоть этот проект и нельзя назвать 
полномасштабным, но процесс разработки 
мало отличается от того, которому он следует 
при создании настоящих больших проектов. 


«Золотая середина» демонстрирует, что ти- 
пография в технологии веб-дизайна занимает 
такое же место, как и в других графических ис- 
кусствах, и что дизайн - это сочетание вдох- 
новения, технических деталей и процедуры. 


р Выбор шри та 209 


ЕАН Е СЕК Те Вашу «И С55 Се 
пнеых ОН Выбор шрифта 
СГ Вену СЗО ль ТЫБ ВБАЦТУ ОР 25$ ОЕЪВН 
оч ср и Потратив время на размышления о содержании и иде- 
мобнаньы оаромавий ологическом наполнении страницы, прикинув воз- 
ты у а СЗ мор Се Ро ор сов отн 
аи АЕ можные варианты верстки, Боумен был готов с голо- 
"=. и вой окунуться в вопросы типографии. 
Те Валу! С$ Смацул тни вибиту ог ска сеанеы 
| Те Без о 35 Габи ны | Может показаться, что выбор шрифта второстепенен 
РА по отношению ктаким вещам, как использование гра- 
Ее 07 СЗ ом фики и цвета, но опытные дизайнеры знают, что ус- 


пех зависит от сочетания множества факторов. И впе- 
чатление от шрифта - один из них. На большинство 


5-Е ЛОВИ 


аызетиниа людей шрифт воздействует на подсознательном уров- 
тины не, зато это воздействие очень сильно. Шрифт может 


СВЕ ТОЙ СЪАГАСВЕТ 
создать то или иное настроение, ассоциируясь с: 


+ юмором; 
4+ стоицизмом: 


+ необузданностью; 


+ капризом; 


Рис.1 + Экспериментирование с различными шрифтами + ностальгией, 

в ходе работы над «Золотой серединой» Если вы можете добавить к этом списку еще какую- 
нибудь эмоцию, то весьма вероятно, что найдется 
шрифт или комбинация шрифтов, с помощью кото- 
рых эту эмоцию можно выразить. Поэтому дизайне- 
ру надлежит подойти к выбору шрифтов серьезно и 
ответственно. 


Экспериментирование 
в Адобе Ши${гатог 


Чтобы сделать правильный выбор, Боумен обратился 
к программе АдоБе Шизгаог. Объединив программ- 
ное средство со своим глубоким знанием типографии, 
он вознамерился подобрать шрифты, в наибольшей 
степени отражающие то настроение, которое он со- 
бирался выразить в дизайне. 


ПРИМЕЧАНИЕ 


Цш{гафог — это программа, в которой используется вектор- 
ная графика. Многие веб-дизайнеры сначала с ее помощью 
делают модель и подбирают шрифты, а затем переходят в 
Адобе РНофозНор, чтобы преобразовать результат в форму, | 
пригодную для Ме (обе программы входят в состав комп- 
лекта АдоБе Сгеауе Зи е). Компания Масготед?а предлага- 
ет аналогичную программу Ргеепапа в составе своей линей- 
ки продуктов 5910 МХ. Подробнее см. ммм. адобе.сот/ 
ргодис{$/сгеаНуези е/ тат. Вет и ммм. пасготе@Та.сот/ 
5оАмате/ фито. 


На рис. 1 представлены результаты первых экспери- 
ментов для работы «Золотая середина». Подыскать 
нечто, наилучшим образом подходящее для тонкого, 
юмористичного, оригинального дизайна, получилось 
не сразу. Заметьте, впрочем, что Боумен воспользо- 
вался исходными заголовками с сайта ТВе С55 еп 


Саг4еп и Те Веашу о! С55 Реяри. Предварительный 
просмотр текста, набранного данным шрифтом, по- 
могает оценить не только сам шрифт, но и то, как он 
смотрится в окружающем контексте. 


В конечном итоге Боумен остановился на шрифте 
МогрИеиз, который можно бесплатно скачать с сайта 
Кит Мефа (угли Ку -теа.сот/Роти. Вт) (рис. 2.). 
Его привлекли некоторые особенности данного шриф- 
та, в частности: 


+ уникальная форма букв М и М; 

+ готические своды (особенно в буквах А и П); 
+ продленные буквы Ки К; 

+ подобие таких литер, как $ и строчная 4; 


+ декоративные ромбы в строчной 1, а также внутри 
р, ОиО. 


В поисках изюминки 


Для создания некоей визуальной изюминки, сообща- 
ющей дополнительный интерес всему дизайну, Боу- 
мену нужен был еще контрастный шрифт. Он решил 
воспользоваться гарнитурой НауенНса. Это современ- 
ный шрифт без засечек, хорошо контрастирующий с 
МогрВец$. Таким образом был переброшен мост меж- 
ду готической и модерновой тональностью, что и при- 
дает работе такое очарование (рис. 3). К числу других 
контрастов можно отнести смешение в списках ссы- 
лок беззасечного шрифта Уегдапа со шрифтом Сеогаа, 
имеющим засечки (рис, 4). Чтобы ссылки состояли 
только из строчных букв, Боумен воспользовался 
свойством СехЕ-сгапзЕогм, указав значение 
1омегсазе: 
#11пКк115Е #165е1есе а.с:111Кк, #111к11еЕ 
#]зе1есЕ а.с:\151%еа ( 

Я1вр1ау:1111те; 

ЕопЕ-Еат11у:Сеога1а, бег1Ё; 

ЕопЕ-метаВЕ:погма1; 

со10::#616623; 


ат -со1ог: пана 
Е ‚ГЕ ао РАК” этсае зе; 


о 
У свойства ЕехЕ-сгапзЕоги есть и другие значе- 
ния: сар1са112е делает заглавными первые буквы 


слов, а пррегсазе переводит все буквы в верхний 
регистр. 


Шрифт Сеогра применяется в основном тексте (рис. 5) 


ивнабранной курсивом преамбуле, это еще больше раз- 
нообразит шрифтовые аспекты «Золотой середины». 


АВСРЕРСНИКЫМИО 


'РОВЗТОУЛЕУ7ААЕ, 


[ОбОавсоЕРСНИКИИП 
ОРОВЗКУЛХУ7 АА. бб 
0&1234567890($. 17 


Рис. 2 4 Шрифт МогрИеи$ 


Рис. 3 +- Заголовок из «Золотой середины», в котором 
использованы одновременно шрифты Могрпеиз и Не№ейса 


Рис. 4 + Шрифты \/егдапа и беогога в списке ссылок. Обратите 
внимание, что весь текст, набранный шрифтом беогоа, 
преобразован в нижний регистр, тогда как текст, отображаемый 
шрифтом \егдапа, преобразованию не подвергался 


$0 УНАТ 


"АВ Те} 9в 


вые 
Г] 


Рис. 5 + Обратите внимание на использование нормального 
и курсивного шрифта беогола в основном тексте и преамбуле, 
а также на графические шрифты в заголовках 


СОВЕТ 


Конечно, никто не мешает вам вволю поэкспериментировать 
с сочетанием различных гарнитур и семейств шрифтов, но 
для получения хорошего результата надо обладать глубоки- 
ми знаниями и опытом. Особенно если вы собираетесь при- 
менять шрифты из разных семейств. Если сомневаетесь, не 
усложняйте. 


СОВЕТ 


На странице ммм. те2го ше.сот/агс 1 уе$/2004/01/18/ 
фуре_{Пе_ех{ есть неплохая статья о применении этой техни- 


ки и смежных вопросах. 


Управление сглаживанием 


Внимательно приглядитесь к графическим шрифтам, 
обратите внимание на то, как четко очерчены литеры. 
Возможно, вы ранее задавались вопросом, почему не- 
которые графические шрифты выглядят в \!еЬ слегка 
смазанными, — тому есть несколько причин. Во-пер- 
вых, с самого начала мог быть неверно выбран фор- 
мат графического файла и плохо проведена его опти- 
мизация. Другая же причина состоит в сглаживании 
(апИ-аПазлв). 


Стлаживанием называется процедура смягчения со- 
стоящих из пикселей изогнутых штрихов литер 
шрифта путем добавления полутонов на краях, В ти- 
пографских программах имеются замечательные сред- 
ства, позволяющие получить прекрасно выглядящий 
конечный продукт, но дизайнеры, желающие, чтобы 
текст смотрелся более четко, могут копнуть поглубже 
и самостоятельно управлять сглаживанием. 


Чем меньше размер шрифта, тем это становится важ- 
нее. Штрихи, из которых состоит литера (а в таких 
шрифтах, как МогрЬецз, штрихов много) нельзя сде- 
лать меньше одного пикселя. Процедура сглаживания 
добавляет полутоновые пиксели, из-за чего возника- 
ет нежелательное размывание. Но можно воспользо- 
ваться имеющейся в большинстве серьезных графи- 
ческих программ функцией Кеги (кернинг), которая 
немного увеличивает расстояние между литерами, 
чтобы результат сглаживания выглядел получше. Под- 
робнее о сглаживании и кернинге можно прочитать 
на странице му мраЕ.сот/ир@гуро3.Бит. 


Углубимся в типографию 


Если все эти разговоры о типографии вызвали у вас 
интерес, что ж — есть много литературы на эту тему, 
как в печатном, так и электронном виде. 


Книги 


В следующий раз, когда пойдете в книжный магазин, 
задержитесь у полки, посвященной дизайну. Там вы 
найдете немало книг, касающихся типографии. Неко- 
торые изних повествуют об истории вопроса, другие — 
о дизайне прифтов, в третьих иллюстрируются рабо- 
ты конкретного дизайнера. Просто пролистайте по- 
нравившиеся книги - так же, как вы просматриваете 
исходные тексты на языках НТМЬ и С5$, это прекрас- 
ный способ познакомиться с методами и идеями, 


ОЕ 7] Типография РЕ 


о которых вы раньше ничего не знали. Не пропустите 
следующие книги хорошо известного автора Робина 
Уильямса (Вот М/ИЙапл$): 


+ Тре Мас [5 Мора Туреитиег, 2па Е@топ и ТйеРС [5 
Мора Туреитиег (обе — Реаспри Ргез$, 2003). Пер- 
вая книга посвящена компьютерам Масицо3Ъ, вто- 
рая — ПК под управлением МЛю4о\з. Обе содер- 
жат прекрасное изложение базовых принципов 
использования шрифтов на экране и в печатных 
материалах. 


+ ТЁе №п-Оезюпег’”5 Туре ВооК (РеасНри Ргезз, 1998). 
Вне зависимости от того, являетесь ли вы профес- 
сиональным дизайнером или только собираетесь 
им стать, эта книга откроет вам некоторые секре- 
ты, касающиеся шрифтов, подскажет, как правиль- 
но оформлять документы и когда имеет смысл на- 
рушить эти правила, 


Более опытным дизайнерам будут интересны и дру- 
гие книги о типографии, Вот несколько заслуживаю- 
щих внимания названий: 


+ Туровтаршс Оеяюп: Еотт апа Соттипканоп, Эта 
Едйоп. КоБ Сацег, Веп Рау и РЫШр Мере$ (]обп 
У/еу & $опз, 2002). Содержит подробную историю 
развития типографского дела, изучение литер и 
справочник наиболее итироко распространенных 
шрифтов. Книга не рассчитана на начинающих, но 
послужит прекрасным подспорьем для желающих 
углубить свои знания. 


+ Тре Еетеп о} Туростарис $1, 2па Е4тон. Кобе 
Впипрригз! (Нагеу & Магк$ РиБзВегз, 2002). Полный 
обзор типографского дела. Материал представлен с 
энциклопедической глубиной, предназначен для про- 
фессиональных типографов, но главы о практичес- 
ких применениях теории делают книгу поистине бес- 
ценной. 


+ Аррнареё Тйе Н1яогу, Еуошноп, апа Реязи оЁГенегз 
И Цзе Тодау. АПап Наеу (РиБ Оуегуцоск Оптаце4, 
1995). Написанная автором многочисленных тру- 
дов по типографии, эта книга увлекательно расска- 
зывает об истории и дизайне современных англий- 
ских шрифтов. Рекомендуем и другиекниги Хэйли, 
они рассчитаны на любой уровень подготовки. 


+ Поинтересуйтесь и современными работами, вы- 
зывающими споры, например книгой Тйе Епна о} 
Рип: Тйе Стайк Реяюп о} Рама Сагбоп. Кеу1зе4 
ЕЧюоп, Гемл$ В]асКме| и Дау Сагзоп (СЬготае 
ВоокК$, 2000). В ней вы найдете неиссякаемый ис- 
точник вдохновения и аргументов, 


Главное -— это баланс 


Онлайновые ресурсы 
по типографии 


В М/еЬ есть множество ресурсов, посвященных типог- 
рафии, начиная от архивов шрифтов до руководств и 
интервью. Задайте поисковой системе Соое запрос 
ГуростарНу, Ёуре юипаптез, и вы получите кучу ссылок, 
дня не хватит просмотреть их. Приведем несколько 
избранных ресурсов: 


+ Туре Беязпег$ (ВИр://срта.с$ пер Ш.са/-асЛопе4е- 
рпегз. Вт). Алфавитный указатель, составленный 
и поддерживаемый Люком Девроем (Гас Реугоуе). 
Содержит сведения о дизайнерах шрифтов от А 
до 7 с описанием их работ и ссылками на сайты. 


+ 14епопЕ(илилул4епопьсога). Очень полезный сайт, 
на котором вы сможете найти нужный шрифт. Там 
же предлагаются и другие типографские ресурсы. 


+ _ МуРопб (ммм глуГот$.сот). Возможно, самый пло- 
хо выглядящий сайт в \\еБ, но полезной информа- 
ции на нем море. Поисковая система позволяет про- 
водить свободный поиск по словам, а инструмент 
М/ВаЕТВеРоп! пытается определить, какой шрифт 
использован в представленном вами изображении. 


+ АдоЪеТуре ТЛЪгагу (ВИр://5оге.адоБе.сотуре). На 
сайте компании АдоБе имеется первоклассная биб- 
лиотека коммерческих шрифтов. 


+ Гоп, Мат насайте У/еБзце Трз (мгуумг меб ЦеНрз.сопл/ 
Гоп$). Каталог всего, имеющего отношение к шриф- 
там для \М\еЬ. Предлагаются бесплатные и условно бес- 
платные шрифты, иноязычные шрифты, перечни 
конференций, посвященных вопросам типографии, 
а также программы, связанные со шрифтами. 


Учиться типографскому делу можно всю жизнь, но для 
отчаяния нет причин. Чем больше вы знаете, тем луч- 
ших результатов сможете добиться в своих работах. 


Главное - это баланс 


Аристотель учил, что мудрец соблюдает умеренность 
во всем. Хотя временами дизайн и должен быть экст- 
ремальным, но большинство дизайнеров-професси- 
оналов стараются соблюдать баланс. 


Контрастирующие гарнитуры в «Золотой середине» 
ясно показывают, что, отыскав удачную комбинацию 
шрифтов, веб-дизайнер сможет достичь желаемого 
равновесия, золотой середины между практической 
целью и надолго запоминающимся, утонченным зри- 
тельным образом. 
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Специальные 


эффекты 


Из этой главы вы узнаете, как создавать раз- 
личные эффекты с помощью фоновых изоб- 
ражений, прозрачности и организации сло- 
ев, чтобы добиться того, что раньше в Ме 
считалось недостижимым. 


Быть может, самое важное, что вы найдете в 
этой главе, - это информация о больной для 
каждого дизайнератеме: поддержке в разных 
браузерах. На примере рассматриваемых 
здесь работ вы узнаете о различных приемах, 
обходных путях и иных способах справиться с 
конкретным браузером. 
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Дизайнер Шон Инман (5Пацп Тптап) 
ммм .с552епдаг4епт.сот/057 


кукурузные 
ХЛОПЬЯ 


Каскад и эффект наложения слоев 


Шон Инман очень любит сбалансированный 
завтрак. Вооруживитись коробкой кукуруз- 
ных хлопьев, капелькой юмора и твердым же- 
ланием нарушить правила, Инман положил 
образы, навеянные утренней едой, в основу 
прелестной работы «Кукурузные хлопья» на 
тему здорового образа жизни. Насыщенный 
специальными эффектами, видимыми в со- 
временных браузерах, этот дизайн раздвига- 
ет границы, определяемые разметкой сайта 
($$ Хей Сагаеп. 


Поскольку очень многие до сих пор пользу- 
ются браузерами, не обеспечивающими пол- 
ной поддержки С5$, то Инман позаботился о 
том, чтобы и в них страница выглядела при- 
лично, но особо впечатляющие эффекты 
приберег для тех браузеров, которые в состо- 
янии их отобразить. 


То, что в большинстве веб-сайтов показалось 
бы спорным, для Геп Саг4еп подходит как 
нельзя лучше, поскольку этот сайт всецело 
посвящен экспериментированию во благо 
прогресса. 


СОВЕТ 


Подробнее о специфичности и наследовании можно прочи- 
тать в спецификации 0655, конкретно в разделе «Аз дтпд 
ргорепу уашез, Сазса@ пд апа пНепапсе» (иммму. м3 .отд/ТВ/ 
ВЕС-С552 /сазсайе. Вт). 


Кезоцгсвь: 


Рис. 1 4 Все элементы 13 на странице отображаются 
красным цветом 


Атейиех: 
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= ем ТЫ Реал", 258 
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Рис. 2 + Элементы 13 класса ассй1уез отображаются 
зеленым цветом, все остальные — по-прежнему красным 


ПРИМЕЧАНИЕ 


Цветной вариант рис. 1 иё2см. на вкладке. 


Каскад 


Меню и эффекты прозрачности, используемые в «Ку- 
курузных хлопьях», видны только в браузерах с вы- 
соким уровнем поддержки спецификации С$$2, на- 
пример в ЕшеГох. Для выборочного применения этих 
возможностей необходимы С55-фильтры, основан- 
ные, в частности, на тонкостях механизма каскади- 
рования. 


Что же понимается под каскадированием в каскадных 
таблицах стилей? Согласно М/ЗС, «с помощью меха- 
низма каскадирования в С5$ каждому правилу назна- 
чается определенный вес. Если применимо несколько 
правил, то приоритет отдается тому, у которого вес 
наибольитий». Две взаимосвязанные концепции -— спе- 
цифичность и наследование — могут стать как ваши- 
ми лучшими друзьями, так и самыми страшными 
кошмарами... не обязательно именно в этом порядке. 


($5 позволяет применять правила сразу к нескольким 
элементам. Не будь такого механизма, в таблицах сти- 
лей пришлось бы устанавливать взаимно-однознач- 
ное соответствие между правилами и элементами - это 
непрактично и громоздко. 


Наследование 


Существует возможность применить стиль к обоб- 
щенным элементам и наборам элементов, удовлетво- 
ряющих некоторому условию. Так, правило, заданное 
для элементов НЗ, будет применяться ко всем элемен- 
там НЗ на странице (рис. 1): 
В3 { 
со1ог: геа; 


} 


Таким образом, все элементы НЗ на странице будутото- 
бражаться красным цветом. Все просто. Но что, если 
надо отменить это правило для некоторых элементов? 
Придется ввести дополнительный класс (рис. 2): 

ВЗ { 


со]1ог: 
} 
Н3З.агсП1уез { 
сотог: агееп; 
| 


геа; 


Ул: Специальные эффекты 


Первое стилистическое правило окраигивает все эле- 
менты НЗ в красный цвет, второе переопределяет его 
только для тех элементов, для которых указан класс 
агсй1уе8. 


Пока ничего особо сложного нет, но сделаем еще один 
шаг. При наличии следующей таблицы как будут выг- 
лядеть элементы НЗ в разделе #111115 (рис. 3): 


НЗ { 
ЕопЕ: 1ем Уегдапа, запз-зег1Е; 
со1ог: гед; 


} 

Н3З.ахгсН1уев ( 
со1ог: агееп; 

} 

#]1иакьаеЕ НЗ { 
Гопе-512е;: 0.8ем; 


} 


Они отображаются красным цветом и шрифтом 
\Уетаапа размером 0 , Зем (или стандартным шрифтом 
без засечек, если Уегдапа отсутствует). Поскольку се- 
мейство шрифтов не переопределено в последнем 
правиле, то Уегдапа наследуется от определенного 
выше глобального правила для элементов НЗ; изме- 
няется только размер. А в предположении, что рас- 
сматриваемый элемент НЗ имеет класс ас 1 уе$, он 
будет окрашен в зеленый цвет. 


Специфичность 


В предыдущем примере продемонстрирована также 
концепция специфичности — последнему правилу на- 
значен больший приоритет, чем первому. Поскольку в 
нем задан еще и класс, то правило считается более спе- 
цифичным и «весит» больше. 


Если бы понятия специфичности не было, то возникла 
бы конкуренция между двумя правилами, ведь для эле- 
ментов В3 водном правиле определен размер 0, Зет, а 
в другом — 1ем. Специфичность - это простой и на- 
дежный способ однозначно выявить победителя. 


На первый взгляд, ничего сложного, но со специфич- 
ностью связаны некоторые проблемы. Вполне воз- 
можно создать чрезмерно специфичное правило, от- 
менить которое можно будет, только задав еще более 
специфичное. 


Рассмотрим пример: 


Боду>НЕм1 #НеаЯег 11.пау19аЕ1оп 11.ПВоме а { 
со1ог: геа; 


} 
Что произойдет, если вы захотите перекрасить ссылки, 
находящиеся в состоянии :Поуех, в синий цвет? При- 
дется пойти еще дальше: продублировать и без того 


В 
а АТН 


Рис. 3 + Сочетание стилей приводит к тому, 
что заголовок отображается зеленым цветом 
и шрифтом \егдапа размером 0, Зет 


ПРИМЕЧАНИЕ - 


Цветной вариант рис, 3 см, на вкладке, 


длинный список селекторов и добавить к нему до- 
полнительный селектор, выделяющий состояние 
‚: Поуег: 
Боау>вЕм1 #Веа4ег и1.пау1даезоп 11.Воше 
а:Ночег { 
со1ог: .геа; 


} 


Специфичность под контролем 


Если все спланировать заранее, то удастся избежать 
сложных, чрезмерно специфичных селекторов. Со- 
ставляя стилистические правила, стремитесь к макси- 
мальной общности, а специфику добавляйте, лишь 
когда в этом появляется реальная необходимость. 


Сравните, например, селектор 


Е]аикКЬтве ы1 11 #3 { 
со1ог: гей; 

} 

с таким: 

#]1'аКкотве НЗ { 
со1ог; геа; 

} 


В первом примере указано много критериев, которым 
должен удовлетворять элемент ИЗ, рисуемый красным 
цветом: он должен находиться внутри неупорядоченно- 
го списка и являться отдаленным потомком элемента с 
конкретным идентификатором, Во втором примере ус- 
ловие нахождения внутри списка снято, но требование 
иметь в качестве предка элемент с указанным иденти- 
фикатором осталось. Если начать с достаточно общих 
условий и постепенно продвигаться к более специфич- 
ным, то не возникнет необходимости составлять слиш- 
ком длинные и чересчур специфичные правила. 


Поиск ошибок, 
связанных со специфичностью 


Вот простой совет по поводу того, как искать ошибки 
в верстке на базе С$5: убедитесь, что причина не кро- 
ется в конфликте между правилами с разной специ- 
фичностью. Если применение некоторого правила не 
дает желаемого эффекта, первым делом проверьте, 
достаточно ли специфично это правило. Для этого 
часто бывает полезно вставить избыточную времен- 
ную разметку и посмотреть, выбирает ли селектор 
рассматриваемый элемент. Рассмотрим пример: 
#111кгтвЕ 13 ( 


Ботаег: 50114 20рх геа; 
} 


Если у элемента ЮЗ не оказывается рамки, сделайте 
селектор более специфичным. Если же рамка появля- 
ется, то уберите объявление рогаег из правила; ошиб- 
ка, скорее всего, не связана со специфичностью. 


Переопределение специфичности 


В С$$ встроена возможность переопределить специ- 
фичность для любого стилистического правила. 
Объявление !ипроцап применяемое на уровне от- 
дельных атрибутов, гарантирует, что данное правило 
будет применено безусловно, какова бы ни была спе- 
цифичность других селекторов в таблице стилей. На- 
пример: 
из { 
со1ог: геа !1прогбапе; 
} 
#111Кк18е 13 ( 
со10г: Бе; 


} 


Хотя второе правило более специфично для элемен- 
тов ВНЗ, находящихся внутри раздела #11пК115с, они 
все равно будут отображаться красным цветом, так как 
объявление ! 1трогбапеЕ в первом правиле заставля- 
ет игнорировать уровень специфичности. Отметим, 
впрочем, что МсгозоЙ Пцегпе! Ехр]огег для УЛп4о\$ 
не поддерживает конструкцию !1трогбапь, так что 
полагаться на это поведение в общем случае не стоит. 


Однако отсутствие поддержки в И{егпе! Ехр]огег мож- 
но считать преимуществом при отладке С$$; исполь- 
зование объявления !1троггапеЕ с целью примене- 
ния некоторых правил во всех браузерах, кроме 
Ицегпе! Ехр|огег, — это одна из возможностей фильт- 
рации. В примере выше рассматриваемые элементы 
НЗ будут отображаться красным в таких браузерах, как 
РигеГох, Орега и ЗаЁат, но синим в Ииегпе! Ехр]огет. 


Каскадирование активно используется в «Кукурузных 
хлопьях», чтобы компенсировать отсутствие опреде- 
ленных эффектов в некоторых браузерах. Ко всему про- 
чему, Инман так отфильтровал стили, что в браузерах, 
которым недостает необходимой поддержки, и только 
в них, появляется нахальное сообщение (рис. 4), пред- 
лагающее загрузить современный браузер и насмехаю- 
щееся над Ицегпе! Ехр]огег. 


Слои 


Сообщение, видное только в Нцегпе! Ехр|огег, и про- 
чие элементы страницы позиционированы абсолют- 
но. Чтобы избежать перекрытия, пришлось предпри- 
нять некоторые меры. 


Ты Чейрл годаиея в вет ыгоман и 

афуагюе4 заеслогз. ое дает гомзег Фе РОЙ 
Сана ви, Огги УЕ НРоОЛЬ а еетнй Сырбогииг т. 
арт В учагз о. ни 54? Та 99 рев | 


Ибиа усло РАНЕ поиа о орга усы Боб вре 
а а ыы 
В ГБ ОБО Кое усы доче гомны Иней учр ро ОГ Зовбиеь тот 
Арон ИраЛьи, ВоВ ана ны гы оГГог еооебанЕ гуррыг 1 Гог 
а а 


рор-ыр БксКАтьЯ агий в Биг" ВБИ Бо гевеи рае Ч хт. 


Рис. 4 + Это сообщение появляется у пользователей, которые 
просматривают «Кукурузные хлопья» в браузере егпеЕ Ехр!огег 


О Инерация ИЖ 


Для управления порядком размещения вдоль оси # в 
С$$ применяется атрибут =-1п4ех. Так как абсолют- 
но позиционированные элементы исключаются из 
нормального потока документа, то стандартного ме- 
тода управления перекрытием часто оказывается не- 
достаточно. Не будь свойства 2-1паех, позициони- 
рованные элементы выстраивались бы снизу вверх: 
тот элемент, который следует в НТМ!--разметке пер- 
вым, оказался бы внизу стека, а последующие элемен- 
ты -— поверх него. 


Свойство 2-1паех дает дизайнеру возможность уп- 
равлять размещением вдоль оси 2 так, как он считает 
нужным. Допуст имы произвольные неотрицательные 
целые значения (начиная с 0). Вот пример: 

#1а1аКкьаеЕе 13 { 

ро51(1оп: абзое; 

сор: 50рх; 

1еёЕ: 50рх; 

2-]паех: 10; 

} 

такт вЕ м1 { 

роё1Е1оп: абвоцие; 

бор: 50рх; 

1еёЁЕ: 50рх; 

2-1паех: 20; 

} 


Если элементы 11 и ВЗ окажутся в одном и том же 
месте страницы, то и1 будет отображаться поверх ИЗ 
вне зависимости от места в НТМТ-разметке, так как 
значение 2-1п4ех для него больше. 


Интеграция 


Имеющиеся в С5$ механизмы организации слоев 
должны быть знакомы графическому дизайнеру, по- 
скольку напоминают соответствующие средства в 
программах манипулирования изображениями. Кас- 
кадирование - это, скорее, концепция из языков про- 
граммирования, не имеющая прямых аналогий в 
мире дизайна, но ее полезно освоить, поскольку это 
позволяет точно управлять взаимодействием различ- 
ных элементов, что и демонстрирует работа «Куку- 
рузные хлопья», 
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Дизайнер Егор Клоос (Едог К 005) 


ммм! .с$5тепдаг4еп.сот/062 


Удвоение 


Два дизайна - одна таблица стилей 


е > ЕН ПЕ Но ее РИ Мы РИ р 47: = 2 АЙ | ВИ | 


Отсутствие ограничений на сайте С55 Геп 
Сагаеп навело Егора Клооса на мысль проде- 
монстрировать, что С$$ — это инструмент для 
воплощения в жизнь любых мыслимых идей. 
Заинтересовавшись трюками, позволяющи- 
ми отправлять таблицы стилей снетривиаль- 
ными конструкциями только тем браузерам, 
которые могут их поддержать, Клоос убеди- 
тельно доказал, что изобретательный код 
может привести к поразительным результа- 
там. Гак и появилась на свет работа «Удвое- 
ние», в которой единственная таблица стилей 
порождает два совершенно разных дизайна. 


Ьу нам "Мам 
Бу СВ Маги! 


Бр Ма Магы 
замы 


Ву Ди! Небелегый 


Бу ]Доми Омтом 


Ву Е ено Рай 


Ву мама Галан} 


Ву КН Домах 


ми МОбе 223 - 


ПРИМЕЧАНИЕ 


Аббревиатура МО5е означает Мозга Орега Заап епВапсетепе 
(дополнения в браузерах Мо? Ща Орега Загап), Подробнее см. 
на странице мм. мег2оБие, сот/агс1уе5/2003/06/25/. 


МО5е 

Споры по поводу того, как улучшить дизайн при про- 
смотре в браузерах с более полной поддержкой С$$, 
велись еще до появления «Удвоения», Идея проста: 
воспользоваться отсутствием поддержки некоторых 
селекторов в том или ином браузере для того, чтобы 
именно с их помощью составить правила, которые 
увидят браузеры, имеющие необходимую поддержку, 
а точнее Мо7Ша и его варианты Етегох, Орега и ЗаЁат. 


‚ ПРИМЕЧАНИЕ 


Селектор дочерних элементов позволяет выбрать только не- 
посредственных потомков данного элемента, а не потомков | 
с любым уровнем вложенности. 


Конкретно, техника МО$е основана на селекторах, 
которые не поддерживаются в М1сго5ой Ицегпе 
Ехр]огег. Наиболее часто для этой цели применяются 
селекторы дочерних элементов, селекторы сестринских 
элементов и селекторы атрибутов. 


Селекторы дочерних 
элементов 


Селекторы дочерних элементов, как следует из назва- 
Рис.1 + Обратите внимание, что селектор дочерних элементов ОВ 
выбирает р непосредственных потомков родителя, данного элемента од положи. на ЕР НЕ Р- 
а не потомков с более глубокой вложенностью ков с тем, однако, отличием, что селекторы потомков 
выбирают потомков с произвольным уровнем вло- 
женности, а не только непосредственных. 


Синтаксически в селекторе дочерних элементов снача- 
ла указывается родительский элемент, затем следует 
комбинатор > (комбинатором называется символ, слу- 
жащий для объединения частей селектора), за ним -— 
дочерний элемент и, наконец, само объявление: 


АЧ1у#сопеепЕ>р {со1ог: огапде; } 
Это правило говорит, что все абзацы, являющиеся 
непосредственными потомками Я1 у с идентификато- 


ром #сопеепе, будут выкрашены в оранжевый цвет, 
(нарис. 1 они показаны слегка затемненным шрифтом). 


Селекторы сестринских 
элементов 


Селектор сестринских элементов выбирает сестер 
(или, если хотите, братьев) данного элемента (то есть 
имеющих того же родителя, что и этот элемент). 


Синтаксически сначала указывается начальный эле- 
мент, затем комбинатор +, за ним — сестринский эле- 
мент и, наконец, объявление: 


Ч1у#мати1п9 р + р {со1ог: геа;} 


В результате абзацы, соседствующие с начальным аб- 
зацем внутри @1у с идентификатором #магп1па, 
будут отображаться красным цветом. Если приме- 
нить это правило к той же разметке, что и выше, то 
мы увидим картину, изображенную на рис. 2 (крас- 
ный шрифт отображен серым цветом). 


Селекторы атрибутов 
и сопоставление с образцом 


А вот тут-то и начинается самое интересное! Возмож- 
но, читатель незнаком с селекторами атрибутов, и 
прежде всего потому, что они не поддерживаются в 
Ицегпе! Ехр]огег. Поэтому большинство практикую- 
щих веб-дизайнеров даже не думают о том, как их 
можно использовать. А ведь селекторы атрибутов 
предлагают очень интересные возможности. 


Селектор атрибутов позволяет выбирать элементы в 
зависимости от того, какие атрибуты для них заданы 
и, что еще более полезно, от того, каковы значения 
этих атрибутов. Так, если имеется ссылка с конкрет- 
ным ОВ, то можно сделать выбор, базируясь не 
только на том факте, что имеется атрибут ВгеЕ, нои 
на его значении. Тогда к каждому элементу с данным 
ОВ, будет применен соответствующий стиль. 


Рассмотрим следующую таблицу стилей: 


[14] {со1ог: сеа1;} 
[19="матрзпа") Росо1ог: геа;) 
[пгеЕ--="ВЕЕр: / Ими. мо Ту. сош/"] 
Чесогае1оп: попе; } 


{Еехе- 


На рис. 3 показано, как эти селекторы модифициру- 
ют внешний вид элементов в зависимости от атрибу- 
тов и их значений. 


Именно этим видом селекторов и воспользовался Кло- 
ос, чтобы дизайн в совместимых с С$5$ браузерах был 
одним, ав Ицегпе! Ехрогег — совершенно другим. 


©$5$-сигнатуры 


С55-сигнатуры получают все более итирокое распрос- 
транение. Идея в том, чтобы приписать идентифика- 
тор элементу Боау, который станет затем уникальной 
сигнатурой для различных таблиц стилей. 


Неаа 1 


ЕНОРРТ Пора СТЕНЫЗН" ФИО ПАНА. ОПИСАН але Сис ВЕНО] ФИ 


Га „ =" г = - й 
АОН СОЛИСТ МНСВО СЕ 


Неад?2 


РАЯрАЧыЯ ИЕеро КАЛИ, ГОК ПуЫя, ООН ВТ, ЗАРА 


На вы Пири аи и Моне ссолизиа 


Рис. 2 4 Селекторы сестринских элементов выбирают элементы 
с тем же родителем, что и у начального 


ПРИМЕЧАНИЕ 


На сайте группы ОРАЁ (ВЕ р;//даЦегу АПеора!9гоир.сот/ 
$е[есфогас(е) имеется прекрасное объяснение работы селек- 
торов в (55. 


солвесафенег 


Рис. 3 + Действие селекторов атрибутов в совместимом браузере 


ПРИМЕЧАНИЕ 


Цветной вариант рис. 3 см. на вкладке. 


ПРИМЕЧАНИЕ 


Применение техники МО$е может основываться и на других 
селекторах, не поддерживаемых Таегпе Ехр(огет, в том чис- 
ле и на некоторых конструкциях из спецификации (5$ 3.0. 
Полный обзор способов применения МО5е для улучшения 
дизайна см. на странице ммм. те220\це.сот/агсН\ез/2003/ 
06/25/ тосе. 


Рис. 4 + Специальное поведение ссылок в «Удвоении». 


уп! Ще 


Рис. 5 + Стандартное поведение ссылок в упрощенной версии 
«Удвоения» 
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Сравнение МО$е со стилями 


Истинная ценность С55-сигнатуры в том, что она дает 
опытному пользователю возможность перенастроить 
внешний вид чужого сайта. Например, если вы часто 
заходите на сайт, в котором текст отображается шриф- 
том размером 9 пикселей и светло-серым цветом на 
белом фоне, так что вы его читать не в состоянии, то 
вовсе необязательно забрасывать автора сайта пись- 
мами типа «исправь, а нето...». При условии, что ав- 
тор включил С55-сигнатуру, вы сможете переопреде- 
лить размер шрифта с помощью пользовательской 
таблицы стилей в своем браузере. 


Увидеть, как С$$-сигнатура применяется в /еп Саг4еп, 
можно на примере работы Клооса: 


<БоЧу 19="сзв-2гп-дагаеп"> 


Чтобы создать дизайн «Удвоения» с дополнительны- 
ми возможностями, Клоос воспользовался сигнатурой 
элемента Ъоду. Заглянув в таблицу стилей, вы уви- 
дите необычные, на первый взгляд, конструкции: 


Боау [1а=свз-хеп-дагаеп] а:13пК { со1ог: *Е90; 
} 

Бойу [19=свз5-еп-даг@аеп] 
#90; } 

Боау [19=сзв-2еп-дагаеп] 
БоЧу [14=свв-геп-дчаг@еп] 


#ЕЕЕ; } 


а:утатееа { со]ог: 


а:Вочег, 
а:асезуе [ со\ог: 


Здесь Клоос определил поведение ссылок в предположе- 
нии, что они находятся внутри элемента роду, для кото- 
рого задан атрибут 19 с указанным значением (рис. 4). 


Сравнение МОзе 
со стилями для штегпет 
Ехр!огег 


Предложить браузеру Пцегпе! Ехрюгег совершенно 
другой набор стилистических правил нетрудно. Нуж- 
но лишть позаботиться о том, чтобы он мог их интер- 
претировать. 


Вот как выглядит версия таблица стилей для Ицегпе! 
Ехрогег: 
а:1пк { союхг: #290; } 


а:м1в1сеа { со1ог: #190; ) 


а:Ноуег, а:асе1уе { со1ог; #ЕЕЕ; } 


Нетрудно заметить, что сами правила не отличаются 
от приведенных выше, но такой синтаксис Ицегпе! 
Ехрогег поддерживает, поэтому они годятся для уп- 
рощенной версии дизайна (рис. 5). 


Специальные эффекты 


Версия «Удвоения» 
с дополнениями 


В версии дизайна с дополнениями есть несколько за- 
служивающих упоминания эффектов. Построен он по 
аналогии со слоями в Адофе РБогозВор:; фон замощен 
повторяющимся орнаментом, а прочие элементы рас- 
положены поверх него. 


Фон задается для элемента Боду (рис. 6): 


Боау [1а=свз-хеп-датаеп) 

{ пагао1п: 100рх 00 0; рааа:1тч: 0; сехЕ-а119тп: 
сепеег; БасКагоцпа: 

ЕтапзрагепеЕ их] (заа1Яъаск.а1Е); } 


Далее добавляется еще одно изображение, на этот раз 
оно ассоциируется с элементом #сопсазпег. Картин- 
ка выступает в роли задника для области контента 
(рис. 7). | 


В преамбуле интересный эффект создается за счет ис- 
пользования светло-серого фона, через который про- 
свечивает задник (рис. 8): 


Боду [19=с8зз-леп-дагаепт] #ргеамь1е { 
ро51Етоп: 

абзо1исе; гор: 30рх; 1еЕЕ: 20рх; а1вр1ау: 
Б1оск; тага1п: 0; Богаег: 


]1рх ЧоЕЕБеа #ЕЕЁ; раадлпоат 0; изаЕй: 
Незлане: 290рх; Баскогоцпа: 
Егапзрагепе иг1 (Ъ1К35;рпд) гереаЕе; омегЁЕ1юм: 
н1ааеп; ) 


196рх; 


Такой же эффект используется и в области контента, 
где поверх фоновой картинки отображается полоса 
прокрутки. Наконец, для расположенной справа па- 
нели навигации со вкладками применен селектор 
: Воуех, создающий очень красивый эффект выделе- 
ния (рис. 9). Конечно, это возможно лишь в браузе- 
рах, поддерживающих : Воуег для любых элементов, 
а не только для ссылок, но можно считать, что браузе- 
ры, поддерживающие селекторы, на которые опира- 
ется МОЗе, этому условию удовлетворяют. 


Поскольку вниманию Пцегпе!Е Ехрогег предлагается 
куда более традиционная таблица стилей, то и говорить 
об эффектах не приходится. Самый интересный аспект 
дизайна для Пи(егпе! Ехр]огег — это заключенный в нем 
юмор. В нем скрыт намек на модель прямоугольных 
областей в С$5$ — девушка с удивленным выражением 
на лице, заключенная в ящик, — и добродушная на- 
смешка над ошибкой в интерпретации этой модели в 
ПцегпеЕ Ехр]огег 5.х (рис. 10). (Модель прямоугольных 
областей - это визуальная модель, которую браузеры 
применяют для вычисления положения отдельных 
элементов на странице. Подробнее см. ммм.м3.огвВ/ 
ТВ/КЕС-С552/Бох.Вит). 


пгре 


Рис. 6 + Этот фрагмент, взятый с сайта здайпоег®.сот, 
образует фон 


Рис. 7 + Эта картинка выступает в роли задника для области 
контента в дополненной версии дизайна 
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Рис. 8 + Этот эффект создан за счет двух графических слоев, 
из которых верхний прозрачен 


$э227л05эн Дам 


Рис. 9 + Применение селектора динамического псевдокласса 
: Поуех к элементам позволяет добиться эффекта выделения 
без привлечения сценариев 


Рис. 10 + «Модель прямоугольных областей» 


ИЕ ниж 


Дизайн с гарантией на будущее 


Дизайн с гарантией 
на будущее 


Не затихают споры по поводу дизайна «с гарантией 
на будущее» (Амате-ргоой). Это означает, что сделан- 
ное сегодня будет работать и с приходом будущих, 
более передовых технологий. 


Понятно, что вся идея «Удвоения» — и вообще техника 
МО5$е как таковая — основана на том, что в Имегпе! 
Ехрогег плохо поддерживаются ставитие уже стандарт- 
ными селекторы, определенные в спецификации С5$ 2.1. 
Но что произойдет втуманном будущем, когда МсгозоЙ 
все-таки выпустит более современный браузер с поддер- 
жкой всех этих средств? Теоретически ничего страшно- 
го — при условии, что все селекторы и эффекты будут 
реализованы, как Должно, гипотетический Пцегпе! 
Ехр|огег для М/а4о\$ версии 7 будет отображать стра- 
ницу так, как это уже сейчас делают Мо’Ца и другие 
браузеры. И тогда мир станет краше. Но не исключе- 
но, что возникнет очередная несовместимость, так что 
предсказать результаты практически невозможно, 


Клоос придерживается мнения, что идея гарантии на 
будущее — это «продукт чьего-то гипертрофированного 
воображения», поскольку мы не знаем, какие сюрпризы 
может преподнести это самое будущее. Так это или не 
так, но, по крайней мере, сегодня мы можем обратить В 
свою пользу факт отсутствия поддержки современных 
селекторов в Пиегпе! Ехр|огег, что с блеском продемон- 
стрировано на примере дуального «Удвоения». 
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Дизайнер Майк Дэвидсон (МтКе Вам145оп) 


ммм. с$52епдагдепт.сот/069 


Не00 
над бонсай 


Преодоление ограничений браузеров с помощью 
изобретательного подбора графики и кода 


Кена: К Ех Ц Е и: 


Поднимая тему озарения на новую высоту, 
Майк Дэвидсон создал обитель дзен-буддиз- 
ма на небесах. Взяв за основу фотографию 
утеса, поросшего деревцами, он для начала 
прикинул, как добиться баланса текста с до- 
минирующим изображением. 


Поместив изображение утеса в правый верх- 
ний угол и осветлив его, Дэвидсон располо- 
жил текст слева и тем самым избежал про- 
блем контрастностью, которые могли бы 
возникнуть, если бы текст шел поверх кар- 
тинки. Черный текст с широкими пропуска- 
ми занимает пустое белое пространство сле- 
ва от утеса, и взгляд зрителя плавно скользит 
вниз, где его ожидает сюрприз: стилизован- 
ные логотипы основных браузеров, выграви- 
рованные на поверхности утеса, и скалолаз, 
заглядывающий в пропасть. Скалолаз - это 
сам Дэвидсон. Успешно одолев подъем к вер- 
шинам С55, он понимает, что пути назад нет. 
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Рис. 1 + Рамка остается неподвижной во время прокрутки 
страницы 


Управление версиями 


Некоторые из наиболее интересных графических 
эффектов в «Небе над бонсай» видны не во всех бра- 
узерах — вследствие использования Дэвидсоном спе- 
циальных свойств С55 оказалось невозможно пред- 
ставить одну иту же картину всем зрителям. Вместо 
того чтобы отказываться от части визуальных эф- 
фектов, Дэвидсон обманул браузеры, которые по- 
казывали их неправильно, воспользовавшись С$5- 
фильтрами. 


Положение черной рамки 


«Небо над бонсай» окаймлено толстой черной рам- 
кой с фиксированным позиционированием: 
нехегаот\уе { 
Баскагоицпа-1таде: ц:1(еаде_БоЕЕом_Ь1аск.91Е); 


Баскагочцпа-гереаё: гереас-х; 
И роваЕоп: ахеазе 


БоЕЕОт: 0; 
Тете: 100%; 
утаЕн: 100%; 


Незайе: 20рх; 
маго1п-1еЕЕ: -100%; 
} 


Атрибут позиционирования Ё1хеа позволяет точно 
расположить элемент на странице, так что он будет 
оставаться на месте даже при ее прокрутке. Создается 
впечатление, что такие элементы всплывают поверх 
остальной части страницы, именно так ведет себя рам- 
ка в рассматриваемом дизайне (рис. 1). 


Однако фиксированное позиционирование нельзя 
считать надежной техникой, поскольку некоторые 
браузеры (и, прежде всего, Пиегпе! Ехр]огег для 
\У!тп49о\$) прокручивают фиксированные элементы 
вместе с остальной страницей. Иногда такое ухудше- 
ние замысла можно считать приемлемым: если бра- 
узер оставляет элементы с атрибутом Е1хеа на мес- 
те — прекрасно, если нет — пусть прокручиваются, 
потерцим. 


Обходной маневр 
для позиционирования 
черной рамки 


Но в случае «Неба над бонсай» рамка наползла бы на 
контент, если бы фиксированные элементы прокру- 
чивались (рис. 2), поэтому необходимо было найти 
какой-то выход из этого положения. Существуют раз- 
личные фильтры, позволяющие скрыть часть табли- 
цы стилей от некоторых браузеров, но вместо того, 
чтобы полностью убирать рамку, Дэвидсон придумал, 
как убрать ее за пределы экрана, воспользовавшись 
совсем другим дефектом браузеров. 


Каждая из двух горизонтальных частей рамки - верх- 
няя и нижняя — позиционируется с атрибутом Е1хеа 
и смещением влево 100%. Поэтому начальные пози- 
ции расположены как раз за правой границей окна 
браузера, то есть не видны, Чтобы они все-таки по- 
явились на экране, Дэвидсон задал для каждой части 
рамки значение левого поля маг91п-1еЕс —100%. 


#ехесгао1\у2 { 
Баскагоцпа-ттаде: 
Баскагоциа-гереаг: 
роз1Е10п: Е1хеа; 
БоЕеЕом: 0: 
1еЕЕ: 100%; 
итаЕн: 100%; 
пезоНе: 20рх; 

ЕЕ 


ит 1 (еде _БоЕбощ_Ъ]аск.91Ё); 
гереаЕ-х; 


оон 


Поскольку большинство современных браузеров под- 
держивает отрицательные значения полей, то рамка 
оказывается именно там, где и хотел Дэвидсон. Все 
прочие браузеры не вернут рамку на экран, так что 
она останется скрытой. К счастью для «Неба над бон- 
сай», те же самые браузеры не поддерживают и фик- 
сированного позиционирования, 


Будда 


Решив вопрос с размещением рамки, Дэвидсон доба- 
вил еще один визуальный эффект, чтобы усилить зву- 
чание основной темы. На выступающем камне, рядом 
с правым краем окна браузера находится золотая ста- 
туэтка сидящего Будды. Это изображение было пози- 
ционировано с атрибутом Е1хеа с применением той 
же техники, что и для рамки. 
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Рис. 2 4 Рамка наползает на контент, если ее разрешено 
прокручивать 
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Поскольку Пиегпе! Ехр]огег в любом случае не смог 
бы правильно показать статуэтку, Дэвидсон решил 
воспользоваться альфа-прозрачностью, предусмот- 
ренной форматом РМС, которая в Пиегпеё Ехрюгег 
также не поддержана. 


За уступом в РМ@-файле была помещена слабая про- 
зрачная тень (рис. 3). Когда пользователь прокручи- 
вает «Небо над бонсай», тень не дает уступу затерять- 
ся среди камней на заднем фоне, так что создается 
впечатление трехмерности. 


Этот простой, но тонкий штришок невозможно было 
бы воспроизвести с применением ограниченной про- 
В зрачности СЕ-файла, и, следовательно, он не виден в 
100% _ реет браузерах, неумеющих правильно обрабатывать про- 
зрачность в формате РМС. 


Рис. 3 + За уступом и статуэткой Будды, 

благодаря прозрачности в формате РМС, видна слабая тень Хотя парящий уступ и изображение статуэтки усили- 
вают зрительное впечатление от «Неба над бонсай», 
но Дэвидсон так глубоко прочувствовал тему озаре- 
ния, что захотел, чтобы лишь истинно «просветлен- 
ные» браузеры с полной поддержкой С55 могли ее 
правильно показать. Воспользовавшись тем же трю- 
ком с отрицательными полями, что и для рамки, Дэ- 
видсон просто скрыл весь парящий уступ от Пщегпе! 
Ехрогег для Маме. 


Однако понимая, что многие посетители, работающие 
именно с этим браузером, не смогут наблюдать эф- 
фект, он сделал так, что остальная часть дизайна вы- 
глядит пристойно даже без уступа. В данном случае 
некоторая деградация приемлема, хотя трудно отри- 
цать, что работа смотрится гораздо лучше в браузе- 
рах, поддерживающих фиксированное позициониро- 
вание и РМС-прозрачность. 


Прозрачность бокового блока 


Разместив текст и фотографию утеса, Дэвидсон столк- 
нулся с проблемой: нужно было как-то расположить 
списки ссылок: $еес{ а 4еярт, агслуе$ и гезомтсе$. По- 
тратив много времени на шлифовку изображения уте- 
са, он не хотел чем-то закрывать его. 


Перекрытие с небольшим уровнем прозрачности ка- 
залось хорошим решением, но РМС-прозрачность 
здесь не годилась: на этот раз было важно, чтобы и 
пользователи Ииегпе! Ехр]огег для У/ш4о\$ могли ви- 
деть всю картинку. Поэтому он обратился к старому 


трюку, который веб-дизайнеры давно применяли для 
создания иллюзии полупрозрачности с помощью не- 
большого прозрачного С1Е-файла. 


Узор, состоящий из чередующихся черных и прозрач- 
ных пикселей, видится как полу прозрачная черная 
область, наложенная на большую область (рис. 4), Это 
напоминает технику создания полутоновых изобра- 
жений струйными принтерами: они наносят решетку 
ИЗ крохотных черных точек, заставляя глаз поверить, 
будто он видит серую картинку. 


Поскольку пиксели больше точек, наносимых струй- 
ными принтерами даже с самой низкой разрешающей 
способностью, то при пристальном взгляде структура 
узора становится видна, так что иллюзия несовершен- 
на, Но она все же достаточно хороша, поэтому этот 
узор можно считать частью дизайна (рис. 5). Чтобы 
увязать его с остальной частью страницы, Дэвидсон 
еще подчеркнул заголовки в основном тексте пунк- 
тирными линиями, Это тонкий ход, призванный при- 
дать всей работе стилистическое единство, пусть даже 
она выглядит не совсем так, как задумано. 


Специальные приемы 


Благодаря примененным Дэвидсоном трюкам с фик- 
сированным позиционированием можно почти с уве- 
ренностью утверждать, что пользователь потратит 
время на прокрутку страницы, просто чтобы посмот- 
реть, как это выглядит. Заметив статуэтку Будды на 
уступе, он, сам того не сознавая, скользнет взглядом 
по материалу, расположенному выше и ниже се. 


Рис. 4 + Увеличенный СЕ, представляющий клетчатый узор, 
который имитирует 50%-ную прозрачность черной области 


Риеита 
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Г 
Рис. 5 + Перекрытие «клетчатым» СЕ 
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Наградой тому, кто доберется.до нижней части стра- 
ницы, будет приятный сюрприз: логотипы основных 
браузеров, которые кажутся высеченными на поверх- 
ности утеса вместе с фрагментом С55-кода (рис. 6). 


Эта дополнительная графика — необычный прием, 
поскольку многие дизайнеры предпочитают разме- 
щать замысловатые детали в верхней части страницы, 
так как именно там на них, скорее всего, обратят вни- 
мание. Нарушение традиции, выражающееся в том, 
что автор поместил тематически значимые элементы 
в нестандартном месте, побуждая зрителя отыскивать 
их, — это творческий подход, знаменующий неорди- 
нарность работы. 


Судите сами 


Хотя не имеет смысла применять хитрые С55-эффек- 
ты, которых большая часть пользователей не увидит, 
тем не менее для экспериментирования очень важна 
возможность селективно понижать сложность дизай- 
на, чтобы во всех браузерах он выглядел приемлемо. 


Рис. 6 4- Логотипы браузеров в виде рун, высеченных Раздвигание границ дозволенности С55-эффектов тре- 

на поверхности утеса бует от дизайнера некоторого азарта, но, к счастью, 
можно сыграть безопасно, не оставив зрителей разо- 
чарованными. Не ограничивая свою свободу, надо все 
же тщательно учитывать уровень поддержки в разных 
браузерах, и тогда кто-то сможет увидеть все богат- 
ство замысла, а остальные не почувствуют себя ущем- 
ленными. 


Дизайнер Эрик Шепэрд (Ейс 5ПерНега) 


\ммулм.с$52епдаг4епт.сот/088 


ТЮЛЬПАН 


Реализация ниспадающих меню с помощью ($$ 
и альтернатива для 1п{егпе+{ Ехр(огег 


Хрупкость цветка тюльпана, у которого недо- 
стает одного лепестка, захватила воображение 
Эрика Шепэрда. Для своей работы он выбрал 
горизонтальную верстку с ниспалающими 
меню вдоль верхнего края. 


Возможность создавать ниспадающие меню с 
помощью одних лишь таблиц стилей впервые 
на своем сайте продемонстрировал несколько 
лет назад Эрик Мейер (уму ллеуегиеБ.сот/епс/ 
с5$/е4ее/тлепл$/4етао), но для работы в Ниегле! 
Ехр]огег необходимо искать обходные пути. 


Таким образом, задача состоит в том, чтобы 
создать оптимальный дизайн, но предусмот- 
реть и альтернативный вариант специально 
для Пщегле! Ехрюгет, не утратив целостности 
и сохранив всю функциональность. Шэперд 
сумел это сделать. 
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Создание меню 
при помощи одних лишь 
таблиц стилей 


Создавать меню на базе С55 — сплошное удовольствие. 
Делается это легко, причем с помощью применения 
различных стилей и способов позиционирования 
можно добиваться различных результатов. Но самое 
интересное в том, что не нужно писать ни одной строч- 
ки на языке ]ауа5стру (рис. 1). 
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В приведенном ниже коде показана базовая разметка 

навигационного меню на основе списка. Это упрощен- 
> ная версия разметки, примененной в «Тюльпане», раз- 
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<Я1\у 1а="щепи"> 

<Н3З>5е1есс а аезтай:</ВЗ> 

<> 

<11><а Нгеё="#">Сагаеп1аз Че РегЕиме</а> Бу <а 

НгеЕ="#"-АгпаиЯо Зоза</а></11> 

<11><а ПгеёЁ="#">Рпеипа</а> Бу <а ПгеЁЕ="#">Ааат 

Ро1ве111</а></11> 

<11><а НгеЕ="#">В1уаноцзе</а> Бу <а 

НгеЕ="#">Оиве1и У11е]а</а></11> 

<]11><а ПгеЕ="#">ре1апсе</а> Бу <а 

ВгеЕ="#">УЛатев ЕВ1у</а></11> 

<]11><а Нгеё="#">Мед1Ееггаптап</а> Бу <а 

НгеЕ="#">донп М1ебеЕе</а></11> 

<11><а пгеё="#">АцзЕт1ап&#8217;5 ГагКкК 51ае</а> 

Бу <а Нге?ё="#">Вепе Сгаззеччет</а></11> 

<11><а ПгеЕ="#*>Тпу1Геаелоп</а> Бу <а 
НгеЕ="#">ВгаЯ Ба1]у</а></11> 

Зейес? а Дел: <11><а ПгеЕ="#">Одуевеу</а> Бу <а 

ПгеЕ="#">Теггепсе Соп1еу</а></11> 


Рис. 1 + Одно из ниспадающих меню в «Тюльпане» 


Сагаешаз 4е Реите Бу Аппайао 5оза т 
Риаециа Бу АЗат Розе | 
Вивоцсе Бу Лазни У ИеЙа Если посмотреть, как выглядит эта разметка без при- 
ак МЕ ини. | менения стилей в любом браузере, включая Ицмегпе! 
Ревапсе Бу Татез ЕЩу | 

при а Ехрогег, то вы увидите обычный неупорядоченный 
Маадцетгапеай Бу оба УГыне список (рис. 2) 
Ацзтай’ $ Даг 514е Бу Кепе Стаззеясег | 
- ПИРС ; 4 Хотя пользоваться ею, безусловно, можно, но ВыЫгГлЛЯ- 
шпуцацоп бу Вгаа Дайу : 
Облнвс во Тоннковь и дит она не очень красиво. Однако стоит добавить таб- 
к Ни лицу стилей, как все преображается. Ниже приведена 

таблица со стилями для тела документа и ссылок. 
Боау { 
Рис. 2 + Без стилей разметка отображается любым браузером Еопе-Еап41у: капоша, аг1а1, не]уеЕ1са, вапз- 


В виде неупорядоченного списка вег1Е; 


Специальные эффекты 


ЕопЕ-512е: ма11; 
Баскагоипа-со1отг: ЗРАРДЕЕ; 
2811540 ыы 
а:111Кк, а:\у1з1Ееа { 
ЕопЕ-метаре: Ъо1а; 
сехЕ-Чесогае1оп: попе; 
со1ог: #998; 
} 
а:По\ег { 
со1от: #887; 
сехЕ-Ядесохаб1оп: циде’11пе; 


} 


На рис. 3 показано, как выглядит эта разметка после 
применения стилей. Обратите внимание, что даже в 
иегпе! Ехр|огег при наведении мыши на ссылку ее 
‘текст подчеркивается. 


Пока все хорошо, но дальше начинаются сложности. 
Необходимо изменить значение свойства Я 1 зр1ау для 
элемента 1 на попе. В результате список будет скрыт 
и активируется лишь при наведении на него курсора: 
м} 4 
Я1эр1ау: попе; 


} 


Добавьте это правило в таблицу стилей, и во всех С$$- 
совместимых браузерах список исчезнет. Чтобы за- 
ставить его снова появиться, нужно добавить динами- 
ческий псевдокласс : Поуег и задать для него значение 
свойства 91ер1ау, отличное от попе, в данном слу- 
чае 51 оск. Теперь, как только курсор мыши задержит- 
ся над элементом #тепа, элемент п] станет видимым. 
Обратите также внимание на дополнительные стили 
для элементов 111 и 11: 


Зтепа:Вомехг и1 { 
41эр1ау: Боск; | 
Богаег: 1рх в011а #776; 
тага1п: брх; 
рааа1па: 5рх; 
эзаЕсн;: 175рх; 
115Е-э6у1е-суре: попе; 

} 

11 { 
тпата1а: 0; 
ра@а1па: Зрх; 
БотЯег-Босгом: 1рх во11а #887; 
} 


Если протестировать эту таблицу стилей в браузе- 
ре, поддерживающем псевдокласс : Ноуег для про- 
извольных элементов, то при наведении курсора по- 
явится меню в виде списка, Именно так оно и 
выглядит в «Тюльпане» (рис. 4), Увы, в Ицегпе 
ЕхрЮгег меню так и остается скрытым, виден лишь 
его заголовок (рис. 5). 


Рис. 3 + Применение простых стилей к меню, включая 
И СТИЛЬ : Ноует, который поддерживается в |п{егпе{ Ехрюгег 


Рис. 5 + При наведении курсора список не отображается, 
так как |п{егпе! Ехрюгег поддерживает псевдокласс : Ноуег 
только для элемента а 


Ниспадающие меню в «Тюльпане» 


Ниспадающие меню 
в «Тюльпане» 


Если посмотреть, как выглядит «Тюльпан» во всей 
красе, то вы увидите всевышеописанное: НТМЁ-спис- 
ки превращаются в меню, а стили задают поведение 
при наведении курсора и придают меню красивый 
внешний вид. Но из-за проблемы в Пуегпе! Ехрюгег 
Шепэрд должен был продумать С55-код очень тща- 
тельно. Задача состояла в том, чтобы дать эффекту 
проявиться в полной мере в совместимых браузерах, 
но скрыть эти стили от Ицегпе{ Ехрогег, «подсунув» 
вместо них что-то другое, пусть не такое хитрое, но 
позволяющее работать с меню, не калеча основную 
идею дизайна. 


Минус на минус дает плюс 


Относительно Пиегпе! Ехрогег здесь уместно сделать 
два замечания. Во-первых, он не позволяет применят Ь 
псевдокласс ; Воуег ни к чему, кроме ссылок, Поэто- 
му эффект наведения курсора воспроизвести не уда- 
ется, и значит, собственно выпадение меню реализо- 
вать таким способом не получится, Во-вторых, какмы 
знаем, [т(егпе! Ехрюгег не понимает некоторых типов 
селекторов. В частности, речь идет о селекторе дочер- 
них элементов, который и составляет главное средство 
сокрытия стилей от этого браузера. Вот фрагмент из 
«Гюльпана»: 


#11акг 862 щ1 > 11 


Пиегпе! Ехр]огег не поддерживает также псевдокласс 
: узЕ-сНт Та. 


#] 11КЬ1еЕ2 #1ее1есЕ 11 > а: ЕЁ твЕ-сН11а 


Это правило интерпретируется так: первая ссылка 8 
любом элементе списка, находящемся внутри элемен- 
та с идентификатором 1зе1есЕ, который является 
потомком элемента с идентификатором 11111562. 
Ктаким элементам будет применен соответствующий 
стиль, если, конечно, браузер поддерживает подобные 
селекторы. Коль скоро для Пцегпе{ Ехрогег дело об- 
стоит не так, то он просто проигнорирует такое пра- 
вило. 


Отсутствие поддержки для подобных селекторов и 
псевдоклассов — источник пост оянной головной боли 
при кодировании стилей для Пцегпе! Ехр|огег, но иног- 
да эти недостатки можно обратить себе на пользу, что- 
бы обойти проблему. 


Разделение стилей 


Чтобы воспользоваться С$$ для создания красивых 
ниспадающих меню и в то же время не отказываться 
от поддержки Пц(егпе{ Ехр]огег, придется объявить ре- 
зервные стили, которые Иегпе! Ехрогег понимает: 
#111К115Е2 { 
ровБЪтЕ1оп: абёо1щаЕе; 
Бор: 65рх; 
Т1еЕЕ; 750рх; 
2-1паех: 2000; 
НезанЕ: 150рх; 
шаги: 0; 
рааа1та: 0; 
итаЕн: 1350рх; 
} 
#11 1кГ1вЕ2 а ( 
Богаег: 0; 
} 
Это лишь малая часть полной таблицы стилей, кото- 
рую можно просмотреть, открыв С$5-файл для дизай- 
на «Гюльпан». Там есть все стили, которые понимает 
Ниегпе! Ехр|огег, а также и дополнительные, распоз- 
наваемые лишь браузерами с более полной поддерж- 
кой С55. Эти стили легко отличить по наличию селек- 
тора дочерних элементов: 
В 11^кт1еЕ2 #]зе1есЕ 11 > а: Етве-еН 11а { 
1зр]1ау: Боск; 
} 
ве > Воду ащкьтее2 11 { 
пага1: 0; 
рааа1та: Зрх; 
Боудег-Боёсом: 1рх в011а #887; 
} 


Разделив стили с помощью этого приема, Шепэрд смог 
реализовать пригодные для работы меню в Ицегпе( 
Ехр]огег (рис. 6). Конечно, они выглядят не так при- 
влекательно, как в других браузерах, но все же неурод- 
ливы и для навигации годятся. 


Еще более продвинутый ©С$$_ 


У реализации меню в «Тюльпане» есть еще один ас- 
пект, на который стоит обратить внимание: 


#111Е11562 11 > 11:1авё-сН11а 


Здесь используется не только селектор дочерних эле- 
ментов, но и псевдокласс : 1аз©-ср119, определенный 
в спецификации С$$3. Если псевдокласс : ЕтхзЕе- 
ср119 позволил Эрику выбрать первого потомка в каж- 
дом списке меню, то этот псевдокласс дает возможность 
выбрать последнего потомка и применить к нему свой 
стиль. Как выясняется, в некоторые браузеры уже встро- 
ена рудиментарная поддержка С5$3, так что ему уда- 
лось достичь удовлетворительных результатов. 
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рт орет 9 


Рис. 6 + Версия меню для |п1егпе! Ехр/огег, 
Не так красиво, как ниспадающие меню, но работать можно 
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СОВЕТ Но на момент работы над этой книгой спецификация 
Прочитать о работе Дина Эдвардса над Гете Ехр(огег 7 С$53 еще не была эеверелена, а ВЫ ВЕДОЛИНЕАК ПЛОХО 
можно на сайте НАЁр://Чеап.едмаг4$.пате/ТЕ7/. Прием некоторые браузеры поддерживают даже имеющиеся 
\На{еуег:Ноуег обсуждается на странице ум\м.х54а.п\/ | рекомендации. Можно ли сделать что-то, кроме по- 
=ре{егпе /с$$Номег.АЕт(. иска обходных путей для Ииегпе! Ехрютег? Вообще- 
| то да, но вам рептать, насколько предлагаемые вари- 
анты вас устраивают. 


Во-первых, можно по умолчанию реализовывать ди- 
намические меню с помощью ]ауа5спр(-сценариев. 
В этом нет ничего порочного, просто С$$ позволяет 
сделать то же самое более элегантно, не задумываясь 
о том, включил ли пользователь в своем браузере 
]Лауазсгтр! или нет. 


Другая альтернатива — воспользоваться так называе- 
мым йк-файлом. Это расширение поддерживает толь- 
ко Пцегпе{ Ехрогег. С помощью сценария, записан- 
ного в Б(с-файле, можно изменить поведение самого 
браузера. Самый известный обходной маневр, реали- 
зованный с помощью этой техники, — это проект 17 
Дина Эдвардса (Оеап Е4\гага$), в котором с помощью 
нескольких В(с-файлов исправлены некоторые ошиб- 
ки в НиегпеЕ Ехр]огег и добавлена поддержка передо- 
вых возможностей (5$. Еще один вариант, касающий- 
ся певдокласса :поуех, — это прием мБаеуег:Воуег, 
базирующийся на тех же принципах. 


Но надо иметь в виду, что всеэти обходные пути офи- 
циально не поддерживаются, так что пользоваться ими 
надо состорожностью, все тщательно взвесив. По сво- 
ей природе они противоречивы. Ясно, что специфи- 
кация должна быть поддержана самим браузером, и 
некоторые пуристы полагают, что любой трюк или 
фильтр — неприемлемое решение. 


Чему мы научились 


От хрупкого тюльпана, давшего начало дизайну, до 
сложных вопросов организации меню с помощью С55 
(которые теоретически решаются элементарно, если 
бы только браузеры должным образом поддержива- 
ли спецификацию) и тонкостей поиска обходных пу- 
тей и фильтрации. Все это есть в «Тюльпане», являю- 
щемся примером изобретательного и вместе с тем 
ответственного применения таблиц стилей. Да, все 
дизайнеры с нетерпением ждут того момента, когда 
необходимость в трюках отпадет, но, пока этот день 
не настал, нужно учиться, как можно воспользовать- 
ся самыми передовыми средствами, предусмотрев в 
то же время резервный вариант для менее совмести- 
мых браузеров. С «Тюльпаном» можно работать и 
получать эстетическое удовольствие от просмотра в 
любом браузере. 


Дизайнер Патрик Х. Лауке (Раёлск Н. ГацКе) 


Уи. с552епдагдепт.сот/041 


Калитка 
В МОЙ Сад 


Простая таблица стилей приводит 
к впечатляющим визуальным эффектам 


МИА БЕС ОА" АИ ть д меч. "2: А я 8 м 


Фотограф-энтузиаст Патрик Лауке предпо- 
читает делать фотографии самостоятельно, а 
не пользоваться готовыми. Не стала исклю- 
чением и «Калитка в мой сад», присланная на 
сайт Деп Саг4еп. Лауке использовал фотогра- 
фию в качестве великолепного фонового 
изображения. 


Кроме фотографирования, Лауке питает при- 
страстие к концепции побочного дизайна 
(шо4епиа| 4ез1епт), которую еще называют ис- 
кусстбвом находок (Гоп ай) — использованию 
случайных предметов в произведениях искус- 
ства. В данном случае Лауке отсканировал 
ржавые железки, валявшиеся рядом с поме- 
щением, где он трудится. Они внесли свой 
вклад в создание ощущения увядания, кото- 
рым проникнута работа. 
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Рис. 1 + Фоновая графика, ассоциированная с элементом Боау 


Таблица 1 + Свойства фона в 65$ 


_Баскакоциа-кереае 38 


`Басккоциа-роззЕЗ ол 


ЕН Опрделяет А ли т ображение ЕЕ вме 


_Ъаскахомла: 


ПРИМЕЧАНИЕ 
Многие дизайнеры определяют не только фоновое изобра- | 
жение, но и цвет фона, Цветами управляет браузер, он пока- 
зывает их вместе с результатом применения прочих стилей, а 
для загрузки изображений может потребоваться некоторое 
время. Поэтому задание одновременно цвета и картинки ос- 
тавляет у посетителя впечатление более плавной прорисов- 
ки страницы. 


9 Зак. 1942 


_Баскогоцпа-со1оЕ | {> _ Определяет цвет фона г: 2: 
_Баскагоцла-А паче < _ Позволяет разместить картинку в качестве  фоковио зо м феей 


_ Позволяет позиционировать И относительно поль ка, за 


Важность фона 


Хотя и образы, и типография «Калитки в мой сад» иг- 
рают роль в создании мрачноватого, меланхоличного 
настроя, но прежде всего этим эффектом дизайн обя- 
зан использованию фоновой графики. Конечно, то же 
самое можно сказать о многих работах на сайте еп 
Саг4еп, но именно эта наиболее отчетливо иллюстри- 
рует важность позиционирования фона и его поведе- 
ния при прокрутке для создания неординарного внег- 
него вида, 


Основной эффект достигается довольно просто и ви- 
ден в разных браузерах. Лауке привязал фоновое изоб- 
ражение к элементу Боду и зафиксировал его (рис. 1). 
Находящаяся справа область контента прокручивается 
на фоне неподвижной картинки. Работа с изображени- 
ями — это краеугольный камень дизайна на основе С5$. 
Важно понимать, какие в вашем распоряжении есть 
свойства и как они влияют на внешний вид стилизуе- 
мых элементов. 


Свойства фона в ©С$$ 


У фона есть шесть свойств, включая стенографичес- 
кое свойство Баскагоципа. Все они перечислены в 
табл. 1 вместе с необходимыми пояснениями. 


и 


Добавление фонового 
изображения и задание 
цвета фона 


Для задания в таблице стилей фонового изображе- 
ния служит свойство раскагоцпа-1тасе, в значе- 
нии которого проставляется ОВ, указывающий на 
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местоположение картинки. ОВ, задается либо отно- 
сительно С$5-файла на том же сервере, либо абсо- 
лютно - и тогда может указывать на другой сервер: 


Баскагочпа-1таде: мт] (1мадез/ту. ра); 


Чтобы задать цвет фона, применяется свойство 
Баскагоцпа-со1Тохг. Значение цвета может задавать- 
ся в шестнадцатеричном виде, в сокращенной шест- 
надцатеричной записи, в виде КСВ или одного из под- 
держиваемых символических названий: 


Баскагоицпа-со1ог: Б1аск; 


Можно также воспользоваться стенографическим 
свойством Баскагоцпа, чтобы сразу задать и цвет, и 
изображение, и ряд других свойств. Именно так по- 
ступил Лауке: 


м па: обо (Баскоковаариа 
-30рх 0 рх по-гереаЕ Ё1хеад; 
} 


Свойство Баскагоипа-со1ог может также прини- 
мать значение Сгапзрагепе, и это активно исполь- 
зуется в «Калитке в мой сад». В этом случае сквозь фон 
элемента проступает то, что находится под ним. В дан- 
ной работе прозрачность часто используется для ото- 
бражения ссылок, например: 

а { 


со1от: ее 


= „Чесохаезом: 


попе; 


Способы присоединения 
фоновых изображений 


Свойство Баскагоцпа-а сасНтепе может принимать 
значения $сго11 или Е1хеа, По умолчанию предпо- 
лагается значение зсго11, то есть фоновое изображе- 
ние прокручивается вместе с контентом. Задав значение 
Е1хеа, можно добиться эффекта, который был нужен 
Лауке: изображение остается на месте, а прокручивается 
только контент (рис. 2). Именно таким образом Лауке 
присоединил фотографию к элементу Боду: 


Позиционирование 
фоновых изображений 


Свойство раскагойпа-роз1 1 оп управляет место- 
положением фонового изображения относительно 


Рис. 2 + Фоновое изображение остается неподвижным, 
когда контент прокручивается. Именно поэтому можно 
одновременно видеть конец текста и фотографию 
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СОВЕТ родительского элемента. Его значение можно задавать 


| Задавая значение 0, необязательно указывать единицу измере- | 8 ВИдДе процента, длины или ключевого слова. Значе- 
ния. Это замечание относится к любому свойству в (5$. Таким НИЕ МОЖЕТ СОСТОЯТЬ ИЗ ДВУХ позиций. Если заданы обе, 
образом, записать приведенное выше объявление можно было то первая определяет положение по горизонтали, а 
бы и так: Баскакоцшпа: #000 ит] (Баскагоцпа.рпа) вторая — по вертикали: 
-З0рх О по-гереаЕ Е1хеа; 


Баскагоипа-роз1Е1ой:; 10рх 20рх; 


Если задана только одна позиция, то она считается 
горизонтальной, тогда как вертикальная предполага- 
ется равной 50% или сепсекг. Приведенное выше 
объявление говорит, что изображение нужно сместить 
на 10 пикселей по горизонтали и на 20 пикселей по 
вертикали. Лауке в «Калитке в мой сад» тоже указал 
положение в пикселях; 


05878000 


д НЕС ‘Е1хеа; _ 
} 


Я ох 6х 


КЛРЫРЕ г мА. 


Обратите внимание на отрицательное значение -З0рх. 
Это допускается и означает, что изображение должно 
быть смещено на 30 пикселей влево, а не вправо, как 
было бы в случае положительного значения. Задание 
в качестве позиции значения 0 располагает изображе- 
Рис. 4 + Так оно выглядит, если задано отрицательное ние по вертикали вровень с верхним полем объемлю- 
смещение по горизонтали щего элемента, в данном случае роду. Рисунки 3 и 4 
показывают, как выглядит изображение относитель- 
но окна браузера без смещения и с отрицательным 
смещением. 


Управление повтором 
изображения 


В «голом» НТМЕ нельзя управлять способом повто- 
ра фонового изображения, по умолчанию оно по- 
вторяется вдоль обеих осей. С$5 же позволяет конт- 
ролировать это более точно с помощью свойства 
Баскагоцпа-гереаг. 


Это свойство может принимать такие значения: 
хереаЕ-х (повторять только вдоль горизонтальной 
оси), гереаЕ-у (повторять только вдоль вертикаль- 
ной оси), по-гереаЕе (вообще не повторять) и 
гереаЕ (повторять вдоль обеих осей, это режим по 
умолчанию). Лауке указал в стенографическом свой- 
стве Баскагоцпа значение по-гереае: 


м 


Тем самым гарантируется, что браузер не станет запол- 
нять все окно фоновой картинкой. Во всех фоновых 
изображениях, применяемых в «Калитке в мой сад», 
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повторение отключено, хотя иногда встречаются и 
другие стилистические правила, здесь не показанные. 


Варианты верстки 


Чтобы получить контейнер шириной 300 пикселей, 

сдвинутый влево от области просмотра на 470 пиксе- 

лей, Лауке задал для элемента Бо@у отступ 470 рх: 
роау { 


рааа1па: 
) 


000 470рх; 


Напомним, что в стенографических свойствах рааа1 па 
и мага 1п порядок задания отступов в разных направ- 
лениях такой: гор, главе, роебом, 1еЕеК. Всезна- 
чения, кроме левого отступа, здесь равны 0 (заметьте, 
что в этом случае Лауке не указал никакой единицы 
измерения) (рис, 5). 


К этому контейнеру применен стиль, описывающий 
фоновое изображение, цвет и ширину: 
#сопса1пег { 
васкагоипа: #000 чу] (БоЕЕом_согпег.рпа) по- 
тереае Бобом ктайе; 
соТтог: апНнег1е; 
итаеН: 300рх; 
) 
С помощью расширения У!еь еуеорег для браузе- 
ров Мо2Ша и РгеГох вы можете включить показ внеш- 
них контуров элементов, а также увидеть информа- 
цию об имени класса и идентификаторе для каждого 
элемента. На рис. 6 показано, как применяются стили 
для всех элементов внутри раздела #сопса1пег, 


Дополнительные 
стилистические эффекты 


В работе «Калитка в мой сад» таблица стилей не со- 
держит почти никаких трюков, поэтому Лауке при- 
шлось решать непростой вопрос об управлении меню 
и размещении сопровождающего его изображения 
цветка (рис, 7). Не так-то легко было заставить раз- 
личные браузеры одинаково показывать окруженное 
рамкой меню. 


Собственно меню не вызывало особых сложностей. 
Лауке создал контейнер для элемента с идентификато- 
ром #11пК113Е и присоединил к каждому элементу 


О И Ш | 


2еп вагаей 


им 

И: 
Рис. 5 4+ С помощью отступа контейнер отодвинут 
на 470 пикселей от левого края окна 


ГКП 


ИИЦ ыы; В 


Рис. 6 + Расширение \\№еЬ Оеуеюрег позволяет увидеть, 
как применяются стили к элементам в контейнере #сопеа1пех 


НИЕ —=—_—— 


Рис. 7 4+ Меню и изображение цветка, видны контуры элементов 


СОВЕТ 


Расширение \МеБ Веуе(орег можно бесплатно скачать со стра- 


ницы ммм. спт5редетск. сот/мотгк/ЯАтегох/меБаеуе[орег/ 


‚ пдех.рйр. 


Отличный стиль, простая таблица 


навигации фоновое изображение; в совокупности они 
и образуют рамку. Но разместить цветок таким обра- 
зом, чтобы он выступал за рамку и располагался по- 
верх фона, оказалось потруднее. 


#]11иК11862>#1ве1есЕ { 
Баскагоцпа: иг] (Е1омег.рпа) 
1еЕЕ; 

мага1п-1еЕе: -65рх; 
рааа1пч-1еЕЕ; 80рх; 
п1п-Бетаве: 150рх; 

} 


по-гереаЕе гор 


Решение, основанное на применении селектора дочер- 
них элементов, работает в браузерах Мо2Ша, Орега и 
ЗаГат!. Чтобы получить приемлемый результат в 
П{егпе! ЕхрЮгег, Лауке воспользовался одним из до- 
полнительных Я1 у, имеющихся в разметке, и абсолют- 
но позиционировал изображение цветка: 


в. но 


тети Е ие рп") по-гереаЕе гор 
1еЕе; 

1 АаЕй: 
ВезаНеЕ: 
} 


115рх; 
150рх; 


Сейчас совместимые браузеры видят оба стиля. По- 
этому Лауке сделал еще один шаг и скрыл последнее 
правило от браузеров, которые и так уже распознают 
селектор #111к18Е2>#15е1есс: 

роау>#ехегар1\1 ({ 


Я1зр1ау: попе; 
} 


\УоПа! И цветок, и меню видимы и ведут себя так же, 
как в современных браузерах. 


Отличный СТИЛЬ, 
простая таблица 


Ясно, что своим изяществом «Калитка в мой сад» обя- 
зана, прежде всего, уникальным образам, типографии 
и продуманному размещению элементов. Хотя на пер- 
вый взгляд дизайн кажется сложным, на самом деле 
для достижения большинства эффектов использует- 
ся довольно простая таблица стилей. Чтобы обеспе- 
чить совместимость, пришлось применить всего один 
обходной маневр. 


Дизайнер Патрик Гриффит (Ра{пск би7тП) 
\м\м/.с552епдагепт.сот/063 


Упругая лужайка 


Для решения визуальных проблем 
иногда приходится потрудиться 


ные: ты так 1 = 


Патрик Гриффит загорелся простой идеей: 
попробовать новую технику верстки и по ходу 
дела определить графические элементы. По- 
требовалось немного времени для осознания 
того факта, что такой подход «сверху вниз» 
может привести к хаотичной и неструктури- 
рованной процедуре проектирования. Начав 
с карандаша и блокнота, Патрик быстро пере- 
шел непосредственно к работе втерминах С55. 
Изображения были добавлены позже, когда 
основные параметры дизайна определились. 


Е 3248 


Несуществует никакого «единственно правиль- 
ного» способа верстать страницу на основе 5$. 
Некоторые дизайнеры сначала воплощают свои 
идеи в каком-нибудь графическом редакторе 
типа Масготе а ЕигеуогК$, а потом приступа- 
ют к написанию кода. Другие начинают с таб- 
лиц стилей, а позже добавляют графику. Если 
принять во внимание разнообразие редакторов 
и графических утилит, то открываются поис- 
тине безграничные возможности. 


Рис. 1 + Этот сайт (ммм айагато.ого), сверстанный Кэвином 
Дэвисом (Кеми Оа\м$) с фиксированной шириной, прекрасно 
смотрится при разрешении 1024х768... 


Е. | в 
© а © СЕТЕ 


= 


З0СН ККП РОИМПАТЮЮМ АЗ ТНЕЗ! 


Рис. 2 +... но в окне меньшего размера появляется полоса 
прокрутки 


Бумага или резина? 


Проектируя сайт, дизайнер часто должен выбирать 
между двумя разными принципами верстки: либо за- 
дать для области контента фиксированную ширину в 
пикселях и соблюдать это ограничение для всего сай- 
та, либо позволить странице заполнить все окно бра- 
узера, не налагая никаких ограничений по ширине, 


Оба подхода имеют названия. Первый часто называ- 
ют версткой с фиксированной шириной, сограничения- 
ми или застывшей. Второй — версткой с переменной 
шириной, полноэкранной или текучей. Но как бы они 
ни назывались, это два фундаментальных принципа 
верстки современных веб-сайтов. 


У каждого подхода есть достоинства и недостатки. 
Один из самых неприятных для графических дизай- 
неров аспектов \У!еь — это переменная игирина холста. 
Когда делается дизайн печатных материалов, разме- 
ры и пропорции конечного результата заранее извест- 
ны. Что касается \У\еБ, то посетитель сайта может про- 
сматривать его как в нераспахнутом окне браузера при 
разрешении 640х480 пикселей, так и в распахнутом на 
весь экран окне при разрешении 2048х1536 пикселей. 
Все промежуточные варианты тоже не исключаются. 


Фиксированная ширина 


Фиксированная итирина позволяет до некоторой сте- 
пени контролировать размер холста путем задания 
точной ширины макета в пикселях. Это идеально в 
случае, когда нужно сохранить пропорции изображе- 
ний, которые не могут маситтабироваться, и шрифта, 
который хотя и масштабируется, но непредсказуемо. 
Но в таком случае пользователь, просматривающий 
страницу в окне небольшого размера, увидит полосу 
горизонтальной прокрутки, так как макет может не 
уместиться в отведенной области (рис. 1 и2). С дру- 
гой стороны, пользователи, работающие с большим 
окном, увидят по бокам пустое пространство. 


Переменная ширина 


С другой стороны, страница, сверстанная с переменной 
шириной, заполняет все окно вне зависимости от разре- 
шающей способности экрана (рис. 3 и 4). Теоретически 


У :: Специальные эффекты 


это идеальное решение, учитывающее различия в раз- 
мерах окна, но не так-то легко найти оптимальный 
баланс между пгириной 600 и 200 пикселей. Часто при- 
ходится в качестве компромисса соглашаться на наи- 
меньший общий знаменатель, когда для больших окон 
разрешается масштабирование, но дополнительно 
появившееся пространство заполняется неоптималь- 
ным образом. Дизайнер Камерон Адамс (Сатегоп 
АЧагл$) пробовал решить эту проблему за счет исполь- 
зования ]ауа$сири (мили ДВетаЫне.согт/ехрегитети$/ 
Кезоиоп-Гауоц\И/), но С5$ сам по себе в этом отно- 
шении ограничен. 


Текучая верстка проблематична с точки зрения сохра- 
нения пропорций, они могут непредсказуемо нару- 
шаться при изменении ширины окна, Соотношение 
1,6:1 между размерами фотографии и расположенной 
рядом с ней закрашенной областью может превратить- 
сяив2:1, ив 3:1, и даже больше по мере раздвигания 
окна по горизонтали. Картинки не растягиваются, по- 
этому остается лишь иметь эту проблему в виду и из- 
бегать слишком строгих требований к пропорцио- 
нальности. 


Эластичный дизайн 


Ну хорошо, мы поговорили о разных методах верст- 
ки, но ведь эта глава посвящена специальным эффек- 
там, нетак ли? Именно так, в «Упругой лужайке» про- 
демонстрирован эффект «эластичного дизайна», 
который, не являясь ни версткой с фиксированной, ни 
версткой с постоянной шириной, представляет собой 
некоторую смесь из того и другого. 


Теория, стоящая за методом Гриффита, выглядит 
вполне логично. Шрифт, размеры которого заданы в 
относительных единицах, скажем, % или ем, может 
становиться больше или меньше в зависимости от 
размеров окна браузера. Ну а если размеры различ- 
ных блочных элементов задавать в тех же единицах, 
то не должен ли масштабироваться сам дизайн? Имен- 
но в этом и состоит суть эластичного дизайна. 


Е =. 
В 


Рис. 3 + Сайт 019Ка! М/еб Мада2те, сверстанный с переменной 
шириной, прекрасно смотрится при разрешении 1024х768... 


Рис. 4 +... 
внимание, что полоса прокрутки не появилась 


и ничуть не хуже в окне меньшего размера; обратите 


ПРИМЕЧАНИЕ 
Соотношение 1,6:1 означает, что если ширина первого объекта 
| составляет, к примеру, 1,6 см, то ширина второго - 1 см. 


ПРИМЕЧАНИЕ 


Гриффит написал статью о своей технике эластичного дизай- 
на и опубликовал ее в январе 2004 года на сайте А 15 Ара" 
(ммм. аП$араге.сот/а А се$/е[а$ с). 


Рис. 5 + С уменьшением размера шрифта главная колонка 
становится уже 


Рис. 6 + При небольшом увеличении размера шрифта 
увеличивается и ширина основной области 


рава: 


Рис. 7 + При еще большем увеличении размера шрифта 
основная область продолжает расширяться, а поле над верхним 
заголовком становится выше 


Эластичный дизайн 70% 


В следующем фрагменте кода показан пример исполь- 
зования относительных единиц в «Упругой лужайке». 
Ширина элементов, отступов, полей и т.д. выражена в 
единицах ет, а не рх, поэтому все масштабируется вме- 
сте со шрифтами. На рис. 3—7 видно, как изменяются 
пропорции при изменении размера окна браузера. 
Боду { 
рааа1та: 0 0 бем 0: 
} 
#сопЕазпег { 
утасн: 48ещ; 
} 
#ргеат6]е, #взирроге1паТехе { 
мзасп: 32ем; 
пага1п-]еЕЁ;: 16бем; 


} 
Так просто? Всего-то и надо задавать ширину и высо- 
ту вединицах ем и можно ни о чем больше не беспо- 
коиться? Не совсем. Поскольку размеры картинок 
фиксированы, масштабировать их вместе с текстом и 
сохранить пропорции не удастся. Переход к эластич- 
ному дизайну требует пересмотра некоторых подхо- 
дов к проектированию сайтов. 


Есть два способа приспособить картинки фиксирован- 
ной ширины к эластичному контексту. В первом при- 
меняется повторение фоновых изображений, во вто- 
ром - усечение. 


Повторение 


По умолчанию в С$55 фоновое изображение повторя- 
ется по горизонтали и вертикали и заполняет всю об- 
ласть элемента. Обычно бывает полезно отключить 
повтор в обоих или хотя бы в одном направлении, но 
эластичный дизайн будет выглядеть лучше, если изоб- 
ражение повторяется: тогда, как бы велики ни оказа- 
лись размеры элемента, фон заполнит его целиком, 
не оставляя пустот вне области изображения. 


В «Упругой лужайке» весь элемент Бо@у замощен по- 
вторяющимся изображением зеленой травки. Элемен- 
ты #11пКк11$Е2, #ргеаш Ле и #зоррогЕ1паТехе 
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заполнены вариантами той же картинки, но других 
цветов (рис. 8). В сочетании они создают эффект зеле- 
ного фона, поверх которого расположены прозрачные 
колонки других оттенков, содержащие текст и ссылки. 


Можно было бы успокоиться, придав каждой колон- 
ке стандартную прямоугольную форму, но Гриффит 
решил расширить концепцию эластичного дизайна, 
добавив закругленные уголки. 


Однако не каждое изображение можно повторить. 
Если только все четыре края картинки не окрашены в 
один и тот же цвет, то нужно обращать особое внима- 
ние на стыки. На рис. 9 показан небольшой фрагмент 
необработанного изображения травы, отчетливо вид- 
ны горизонтальные и вертикальные линии на стыках 
повторяющихся квадратиков. 


Избежать этого можно с помощью небольшой кор- 
ректировки изображения в АдоЪе РАофозпор. Фильтр 
ОН5е! (РЕШег > ОШег — ОЙ$е!) позволяет имитиро- 
вать выдвижение картинки за границы холста и появ- 
ление с другой его стороны, так что сразу становится 
видно, что произойдет на стыке. 


Нарис. 10-12 показан процесс совмещения цветов тра- 
вы, а на рис. 13 окончательный результат. Конкретный 
способ выбирайте сами — можете взять инструмент 
Сопе ${атр или НеаНпв Вга$В, чтобы клонировать уча- 
стки нестыкующихся областей для закрашивания швов, 
или воспользоваться рассмотренным в главе 4 методом 
растушевки или какой-либо другой техникой, наибо- 
лее подходящей для имеющегося изображения. 


Усечение 


Приводя в своей статье Назис Резри цитату из он- 
лайнового дневника Хайко Хебига (Нащо Нее) 
(иулилиу. Ве .ога) (рис. 14 и 15), Гриффит отмечает, что 
другой подход к эластичности связан с использова- 
нием изображений, допускающих переменное усече- 
ние. По мере увеличения или уменьшения доступной 
области становится видна большая или меньшая 
часть изображения. 


Есть два простых способа организовать такого рода элас- 
тичность: применить свойство оуегЕ1ом: Н1Ааеп к 
контейнеру изображения, для которого задана ширина 
в процентах, или же связать с элементом переменной 
ширины фоновое изображение, Картинку шириной 600 
пикселей можно вложить в Ч1у: 
<Я1у с1азз="игаррег"> 
<1та вгс="в5Ку11пе.)ра" этаЕбн="600" 


Ве196е="200" а16="5Ку11пе" /> 
<ра1\м> 


Рис. 8 + Изображения травы, которыми мостится «Упругая 
лужайка»: ярко-зеленое для основного фона, коричневое для 
боковой колонки и темно-зеленое для главной области контента 


Рис. 9 + При повторении видны стыки 


Рис. 10 + На одной смещенной Рис. 11 + В результате 
плитке видно несоответствие клонирования примыкающих 
цветов на стыках областей шов закрашивается 


Рис. 13 + Теперь стыки гораздо 
менее заметны 


Рис. 12 4 Окончательный 
ВИД ПЛИТКИ 


ПРИМЕЧАНИЕ 


Цветной вариант рис. 8-13 см, на вкладке, 


Рис. 14 + В онлайновом журнале Хейко Хебига видна большая 
или меньшая часть расположенной слева фотографии 

в зависимости от имеющегося пространства. Здесь показано, как 
выглядит изображение при разрешающей способности 800х600 


Рис. 15 + Та же фотография при разрешающей способности 
1100х600. Обратите внимание, что ширина фотографии 
пропорционально увеличилась 


СОВЕТ — ы 
Свенд Тофте (5уеп ТоЁе) предложил нестандартный, но работа- 
ющий прием, чтобы компенсировать отсутствие поддержки свой- 


ства мах-и1аЕН в етеЕ Ехр|отег 6 (млм. зуепё ое. сот/ 
 соде/тах_ми@В_1тп_1е). 


Эластичный дизайн 


Далее, если для этого 917 указать ширину, выражен- 
ную В процентах, то часть изображения МОЖНО скрыть, 
задав свойство оуегЕ1ом: ПБ1адег: 
ВНугаррег ({ 
тасий: 1ТОем: 
оуегЕ1ом: Н1ааеп; 


} 


Вместо этого можно связать изображение непосред- 
ственно с Ат у, указав его в качестве фонового: 
фигаррег { 
тар: 10ем; 


Баскогоциа: 11:1(5Ку11пе.7р9) по-гкереае; 
} 


Если изображение повторяемо, то можно опустить 
атрибут по-гереаЕ и вымостить им элемент в слу- 
чае, когда размер #игаррег начинает превышать ис- 
ходный размер изображения, 


Оттолкнулись - и вперед 


Эластичный дизайн — это интересный новый метод вер- 
стки веб-страниц, но будьте осторожны: поскольку про- 
порции дизайна изменяются независимо от размеров 
окна браузера, то может получиться, что страница ока- 
жется больше окна, а это может привести к усечению 
части изображения, появлению полосы прокрутки и 
другим неожиданным вещам. В какой-то мере спра- 
виться с этим помогает свойство тах-м1 Е: 

#йсопба1тег { 

тах-мтаЕН: 700рх; 

] 
Однако Мисгозой: Имегиее Ехрогег 6 для МЛп4о\$ не 
поддерживает свойство мах-м1аеН. Имеются спосо- 
бы обойти это ограничение, но все они несовершен- 
ны. Причуды браузеров могут побудить к отказу от 
экспериментов, но что же поделать — освоение нового 
всегда проходит с переменным успехом, само по себе 
это не так уж плохо. 


Придумывание новых способов работы в \/еБ может 
окончиться как успехом, так и неудачей, важен конеч- 
ный итог. «Упругая лужайка» — это блестящий при- 
мер того, как эксперименты одного дизайнера могут 
принести пользу всем. 


Живая изгородь, с. 254 Радио 2еп, с. 260 


& ОУТЗТОМ бЕ 


Корпорация 2еп\М/огКс, с. 272 Открытое окно, с. 278 


К югу от границы, с. 266 


Мнемоника, с. 284 


Можно сесть и завести разговор о теории, 
которая всем нам нравится, но если не засу- 
чить рукава и не заняться самостоятельно 
сборкой головоломки, которую представля- 
ет собой дизайн на основе С$$, то все эти 
рассуждения останутся туманными и беспоч- 
венными. 


Чтобы вы могли попрактиковаться, мы отобра- 
ли шесть вариантов дизайна С$$ Геп Сагдеп 
ипроанализировали процесс создания табли- 
цы стилей для каждого из них. Пройдите этот 
путь снами, ивы станете лучше понимать про- 
цедуры и методы, применяемые в современ- 
ном дизайне на основе С$55. 
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Дизайнер Кевин Мирс (Кеуп Меагз) 
мии. с552епдагаепт.сот/031 


Живая изгородь 


Фоновые картинки сливаются 
с переменным передним планом 


Тема сада нашла отражение во многих вари- 
антах дизайна еп Саг4еп, но дизайкер и ил- 
люстратор Кевин Мирс подошел к ней с нео- 
жиданной стороны. Вместо того чтобы делать 
детальные фотографии растений, ов выбрал 
стиль мультяшек. 


Мирс начал с садовника, везущего тачку, а в 
результате получился живой веселый сад, 
сверкающий яркими цветами и огражденный 
живой изгородью, 


Ясно, что для «Живой изгороди» понадоби- 
лось много изобразительного материала. От- 
дельные использованные картинки представ- 
лены на следующей странице (рис. 1). 


Расположение колонок 


НИР 
а едьвнаи 
Фи 
Фе 
=Фоденись 


Рис. 1 + Все изображения, использованные в «Живой изгороди» 
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Рис. 2 + Колонка центрирована, но больше пока ничего нет 


Очертим границы 


Прежде чем включать картинки в дизайн, нужно задать 
несколько основных параметров. Мирс воспользовал- 
ся версткой с фиксированной шириной, хотя изобра- 
жение в заголовке повторяется и заполняет всю шири- 
ну окна. Центральная часть страницы ограничена 
областью шириной 732 пикселя. Раздел #сопса1пех 
содержит все остальные элементы, поэтому ограниче- 
ния применяются именно к нему: 


Бо@у { 
мага1п: 0; 
рааа1т9ч: 0; 
сотог; 


#888; 

я: _ Сех хЕ- = - Е Та: и сепе. 
} 
#сопсатпег { 
ров161оп: ге1аё1уе; 
А 0; 


Ширина раздела #сопбалпег установлена равной 
732 рх, а объявление свойства тага1п центрирует его 
по горизонтали, поскольку значение ацео отводит под 
поля все оставшееся пространство за вычетом шири- 
ны самого контейнера. Поскольку для элемента Бойу 
свойство СехЕ-а119п установлено в сепсех, то для 
выравнивания содержимого #сопеа1пег налевую гра- 
ницу нужно отменить это правило и задать значение 
1еЕе. Имегпе! Ехрюгег для У/т4о\м’; версий 5.0 и 5.5 не 
интерпретирует описанные выше значения свойства 
тата п как должно, поэтому и применен этот простой 
обходной прием, чтобы расположить #сопса1пег по 
центру страницы. Добавив еще стили для цветов ссы- 
лок, мы увидим страницу, изображенную на рис. 2. 


Расположение колонок 


Следующий шаг — скрыть различные заголовки, что- 
бы они не портили верстки в колонку. 


№1 врап, [2 эрап, НЗ врап, 
врап { 

Я1вр1ау: попе; 

} 


ваитскочищагу р.р 


Реконструкция 


Основная область контента уже определена, так что 
можно переходить к трем расположенным внутри 
нее колонкам. Разметка сайта С$$ еп Саг4еп за- 
трудняет реализацию того, что задумал Мирс: цен- 
тральная колонка включает разделы #ргеашЬ1е и 
#виррогЕ1паТехь, но не существует отдельного 
элемента, который заключал бы оба эти раздела и к 
которому можно было бы применить стиль. Поэто- 
му к #ргеамЬ1е и #5аррогЕ1паТехЕ придется 
применять стили по отдельности, чтобы визуально 
они выглядели как часть одной колонки: 

#ргеапЬ1е { 

ро5з161о1: ге1абстуе; 

ТеёЕ: 195рх; 

рада1па-Босеош: Орх; 

утаЕН: 400рх; 

} 

#зиррогетпаТехе { 

роз1ЕТтоп: ге1ае1уе; 

1еЕЕ: 195рх; 

раа91па-БоЕбот: Орх; 

Богаег-Боссом: 2рх во11а #363; 

итаен: 400рх; 

} 


Для каждого элемента задана ширина 400 пикселей, а 
за счет относительного позиционирования они ото- 
двинуты от левой границы на 195 пикселей, вследствие 
чего и образуют центральную колонку. Того же эф- 
фекта можно было бы добиться, задав значение свой- 
ства пага1п-1еЕс, но воригинальном С$$-файле сде- 
лано именно так, как написано выше. На рис. 3. 
показано, как теперь выглядит страница. 


Следующий шаг — разместить в нужном месте боко- 
вой контент. Сейчас список ссылок, который должен 
оказаться слева, находится в самом низу страницы; для 
перемещения его наверх применяется абсолютное по- 
зиционирование: 
#11иЕЬтеЕ { 
роз1е1оп:абво1аеЕе; 


Сор: 200рх; 
1еЁЕЕ: 0; 
мтаЕн: 190рх; 


} 

#аи1скбииипату р.р1 { 
ро51Е10оп: абзо1иее; 
Сор; 12е1; 

УтОНе: 15рх; 


мтаЕн: 120рх; 

маго1п: 75рх 0 0 580рх; 
ЕопЕ-втхе: 80%; 
сехЕ-а11ап: улаНЕ; 

} 

#ао1тскэшищагу р.ра { 
ров1Е1оп: абво]1иЕе; 
Еор: 25ем; 
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Рис. 3 4 Текст сдвинут, чтобы освободить место 
для боковых колонок 
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Рис. 4 + Все три колонки позиционированы 


Хитрости с картинками 


Тане: 15рх; 

итаЕв: 120рх; 

мага1п: 0; 

Гопе-512е: 93%; 

Бехе-а11а1п: сепбег; 

рааа1па-БоЕбом: 90рх; 

Баскахгоипа: иг1 ("Баггом.91Е") по-гереас 
БосЕОм; 


} 


Тут сделано много всего. Элемент #11пК115е полу- 
чил ширину, перемещен наверх и придвинут к левой 
стороне контейнера #сопса1пег. Оба абзаца внутри 
раздела #ац1ск5иштагу точно также придвинуты к 
правой стороне контейнера (можно было бы вместо 
этого позиционировать общего родителя обоих - эле- 
мент #ап1скбиютагу - и тем самым избавиться от 
одного лишнего правила). В данный момент страни- 
ца выглядит так, как показано на рис. 4 


Хитрости с картинками 


Теперь, когда страница начала обретать желаемый вид, 
рассмотрим, как заполняются графические области. 
Начнем с заголовка. Он состоит из повторяющейся 
группы деревьев на заднем плане и расположенного 
поверх них графического текста. Проще всего доба- 
вить повторяющееся фоновое изображение: 
Боау { 
магаат;: 0; 
| Кое 0; 


Е: м ай 9 Е ета Вы 4 
т: : о р мя пере а Е а 
+ Я ай] ис1 и. и 9-е #15 ЕС й Е: ы]. Зы. = я гае. = - 


‘со1ог: #888; Бар. 
БехЕ-а11ап: сепёег; 
} 


К имевшемуся ранее правилу БоЯу добавлены фоно- 
вая картинка и цвет фона. Включив в объявление свой- 
ства Баскагочцпа значение гереае -х, мы тем самым 
утверждаем, что картинка должна повторяться толь- 
ко по горизонтали, а это нам и нужно. 


К основному заголовку 11 страницы присоединяется 
еще одна, на этот раз неповторяющаяся картинка, рас- 
положенная поверх уже присоединенного к элементу 
Боау фонового изображения. Напомним, что для каж- 
дого зрап внутри всех заголовков на странице задано 
свойство Яа1зр1ау: попе, поэтому текст скрыт и ус- 
тупает место графике, которую мы сейчас и добавим. 
Но сначала надо задать для №1 правильные размеры: 
#$раденеааег 11 { 
ВезаНЕ: 200рх; 
Баскахочцпа: иг] ("пиЕт1Е1е.91ЁЕ") по-гереае; 
раая:па: 0; 
} 


Поскольку этой картинке нужна длинная горизон- 
тальная область, то элементу В1 разрешено расши- 
ряться и заполнять весь контейнер (то есть элемент 
# сопсазпег, для которого ранее была задана шири- 
на 732 рх); подкорректировать нужно только высоту 
Вела е. Обратите внимание, что верхний край цент- 
ральной колонки тоже сместился вниз; поскольку 11 
появляется в разметке раньше, то заданная для него 
высота влияет на положение последующих элементов. 
Боковые колонки при этом не затрагиваются, так как 
они позиционированы абсолютно и, значит, изъяты 
из нормального потока документа. Два этих мелких 
изменения радикально меняют внешний вид страни- 
цы (рис. 5). 


Поскольку фон, ассоциированный с элементом Бобу, 
фиксирован, а положение заголовка переменно, то 
нельзя заранее сказать, перекроет ли заголовок (напри- 
мер, фигурка с раскинутыми руками) деревья или 
небо. Наблюдать этот эффект можно, меняя размер 
окна браузера, — вы увидите, что положение фигурки 
относительно фона изменяется. Но при сохранении 
изображения, связанного с заголовком, верхняя поло- 
вина была сделана прозрачной, поэтому оно прекрас- 
но выглядит на фоне заднего плана. Каков бы ни был 
размер окна браузера, оба изображения сочетаются без 
видимых «швов» (рис. 6). 


Форматирование 


Поскольку в окончательном дизайне по-прежнему 
используется шрифт, подразумеваемый браузером по 
умолчанию, то нужно внести еще несколько мелких 
дополнений, начав с центральной колонки: 


#зиррогЕзпабехе р { 
131 пе-Незайе: 1.5ем; 
} 

#ргеамЬ]1е р ( 

итаЕВ: 350рх; 

} 
#Еоогег { 


Баскагоцпа: 1090988; 
соток: #ЕЕЕ; 
рааа1та: 10рх 20рх; 
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Рис. 5 + Небольшие изменения в коде С55 сильно меняют 
внешний вид. Теперь с заголовком покончено 


Рис. 6 + Фигурка на переднем плане сливается с фоновым 
изображением даже тогда, когда ее положение изменяется 
вследствие изменения размера окна браузера 


СОВЕТ 


В отличие от многих других свойств 65$, в значении свойства 
11пе-ретоаНнеЕ необязательно указывать единицу измере- 


ния: 11пе-незане: 1.5; - это корректная запись, озна- 
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Рис. 7 4 Почти все, Осталось только разобраться с заголовками 


Завершающие штрихи 


Богаег-сор: 1рх во14а #363; 

ЕопЕ: 85% УегааБа,Аг1а1, бапз-вег1 Е; 
гехс-а]11ап: селбег; 

} 
#Еоосег а:11пКк, #Еообег а:\/1в16еа { 
рада1па: 0 5рх; 

Еопе-метане: погма]1; 

} 


Первое правило уменьшает расстояние между стро- 
ками (свойство 11пе-Велайе). Затем для блока 
#ргеашЮ1е устанавливается ширина 350 рх, вероят- 
но, для того чтобы слегка увеличить промежуток меж- 
ду этим блоком и правой колонкой. 


Хвостовик требует чуть больше форматирования. Ра- 
нее для элемента #заррогЕ1паТехе уже была зада- 
на зеленая нижняя граница, отображаемая прямо под 
хвостовиком; теперь мы добавим к самому элементу 
#+Еоосег цвет фона БЪаскагочпа и верхнюю грани- 
цу Богаег-Еор. После этого страница будет выгля- 
деть, как показано на рис. 7. 


Завершающие штрихи 


Но не забудьте, что необходимо что-то решить по по- 
воду скрытых заголовков: 


#горрогстааТехе №3 { 

Везаве: 70рх: 

} 

#ехр1апае1ой Н3 { 

Баскагоипа-1таде: ит] (*мпаЕе.а1Ё"): 
Баскагоипа-гереас: по-гереас; 

} 

#11окьувЕ 83 { 

Незане: 41рх; 

} 

#1зе1есЕ НЗ { 

Баскагоипа-1маае: цх1("ве1есе.д91Е"); 
} 


Мы не привели большую часть стилей для отдельных 
заголовков, ведь никаких сюрпризов там нет. Снача- 
ла задается согласованная высота Вел две для всех эле- 
ментов [3 внутри первых двух разделов, а затем с каж- 
дым заголовком ассоциируется фоновая картинка 
Баскагоипа-1таде, которая придает дизайну завер- 
шенный вид, 
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Дизайнер Марк ван ден Хойфель 
(Магс мап деп Нецуе!) 


мии .с552епдагдепт.сот/058 


Радио /еп 


Шкала настройки в виде фиксированного 
фонового изображения 
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Вдохновившись видом своего старенького 
радиоприемника, Марк ван ден Хойфель ре- 
итил воспользоваться фиксированным фоно- 
вым изображением, чтобы создать образ шка- 
лы настройки частот вместе со скользящим 
индикатором. Разметка была обусловлена за- 
головком, а поскольку индикатор перемеща- 
ется по шкале горизонтально, то появление 
горизонтально прокручиваемой страницы 
было почти неизбежно. 


Классический облик подчеркнут шрифтом в 
стиле «ретро», фотографиями радиоприем- 
ника, от которого все и пошло, и желтоватой 
цветовой гаммой, символизирующей соста- 
рившийся материал. 


анны 


Е д фед на Ирена а Рока Бр фра бащь В сша 
А Е И а ва ный м’ 
Трона ОБ ея ый ва в фев ры Ре вы ежу тая НЫ соый 
т С“ Е и та В ЗН ОВ ини мены 

ыы сы Ра я я а а ; 
Паевые у Гери Аль Сообщи о Сарт а рад, 
м т 48 


——-———————— Ша 


Рис. 1 + Картинки, использованные в «Радио Реп» 
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Рис. 2 + «Радио Реп» после форматирования текста 


ПРИМЕЧАНИЕ 
Браузер Мтсгозо Г\кетпеё Ехрогег для \МУпдом/$ поддержи- 
вает фиксированное присоединение изображения только к 
элементу Боау. 


Готовим сцену 


Если не считать изображений в заголовках, то в рабо- 
те «Радио Геп» эффект достигается при минимальном 
использовании графики (рис. 1). Уникальный внеш- 
ний вид горизонтального макета обеспечивают имею- 
щиеся в 655 средства позиционирования. 


Для начала ван ден Хойфель также скрыл текст обоих 
основных заголовков. Позже они послужат для раз- 
мещения картинок, а пока пусть не мештаются: 
#радеНнеаЯаег №1 врап, #раденеааег 12 врап { 
Я1зр1ау: попе; 
} 
Применены и некоторые другие базовые средства 
форматирования, здесь мы их не показываем, но при 
желании можно ознакомиться с исходным С5$-фай- 
лом (рис. 2). Прежде чем добавлять прокручиваемую 
шкалу, необходимо расчистить для нее место. 


Основные особенности верстки 


Для размещения большей части элементов в «Радио 
Геп» применяется абсолютное позиционирование, 
следовательно позиционированные элементы изыма- 
ются из нормального потока документа. Поскольку 
оставшиеся элементы ничего не знают о положении 
начала или конца абсолютно позиционированных эле- 
ментов, то перекрытие неизбежно. На какое-то время 
отвлечемся от этой проблемы, сразу расположив не- 
сколько элементов так, чтобы их края соприкасались; 
тогда перекрытия не будет. Соответствующие прави- 
ла приведены ниже: 
фацтск5ииитаку { 
роз1Е1о0оп: абзо1щее; 
гзоНЕ: Орх; 
сСехЕ-а119п: 1еЕС; 
изасй: 165рх; 
ВезаНе: 340рх; 
Бор: 95рх; 
рааа1п9-Еор: 
} 
#ргеашЬ1е { 
роё1Е1оп: абзо1аее; 
1еёс: 10рх; 


40рх; 


кехЕ-а11ап: гтаНЕ; 
изаей: 165рх; 
сор: 95рх; 


#зиррогЕзпаТехе ({ 
роз1Е1оп: абзо1асе; . 
и1АЕВ: 1230рх; 
рааа1па: 95рх ‘0 0 185рх; 
сехЕ-а1101: ЭазЕ1Еу; 
2-1паех: 3; 
} 
#1а1Ккь1вЕ { 
ЕопЕ-Еащ1]у: Аг1а1, Не1уее1са, вапз-вег1Е; 
ро81Е1оп: абво1ие; 
Бор: 0; 
раЗа1па-Еор: 480рх; 
кехЕ-а11ап:;: ЭавЕ1Еу; 
2-1паех: 1; 
} 
Этот план срабатывает, если размер шрифта в брау- 
зере по-прежнему составляет 10 рх, как было задано 
ранее (рис. 3). Но поскольку многие браузеры позво- 
ляют пользователю масштабировать текст, то пере- 


крытие все же возможно (рис. 4). Мы еще вернемся к 
этой проблеме ниже. 


Организация слоев 
и присоединение графики 


Если вы еще не посмотрели, как оригинальный дизайн 
прокручивается по горизонтали, рекомендуем сделать 
это сейчас (рис. 5). Как ни странно, эффект достигается 
без использования сценариев. В «Радио еп» изобрета- 
тельно применены слои и значение Ё1хеЯ атрибута 
Баскагоипа-а Е асвмепе. Поскольку изображение 
шкалы радиоприемника присоединено к элементу Бойу 
статически, то при любой прокрутке страницы оно ос- 
тается на месте, а оставшаяся часть страницы прокручи- 
вается поверх картинки. В правиле для элемента Боду 
есть строка, в которой заданы значения свойств 
БасКагоцпа-1мтаде и Баскагоипа-роз1 1 оп: 

Боау { 

ЕопЕ: 10рх Сеога1а, Аг1а1, Не1уеЕ1са, 
запз-зе:1Е; 


+ 


гтленч ъор сецпеег 
шага1п: Орх: 


} 


А индикатор шкалы присоединяется к элементу 
#5иррогЕ1паТехе: 


#заррогЕтпаТехе { 
ров1Е1оп: абзо1аЕе; 
утаЕВ: 1230рх; 
рада1п9: 95рх 0 0 185рх; 

сехЕ-а1191: )ивЕ1Ёу; 
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Рис. 3 + После применения базового форматирования 
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Рис. 5 + При прокрутке страницы индикатор перемещается 
вдоль шкалы 
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Рис. 6 + Абзацы оказались в горизонтально расположенных 


колонках 
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Рис. 7 + При масштабировании текст перекрывается 


Пози ционирование колонок 


Теперь должно быть понятно, почему для элемента 
#5иррогЕ1паТехе задана такая большая ширина: не 
просто для того, чтобы в нем поместились горизон- 
тально выстроенные абзацы, но и чтобы гарантиро- 
ванно появилась полоса прокрутки, позволяющая на- 
блюдать эффект перемещения индикатора. 


Позиционирование 
КОЛОНОК 


Пока что текст в теле страницы представляет собой 
последовательность очень широких абзацев. Испра- 
вим это, расположив их горизонтально поперек окна 


браузера: 

#ргеанЬ1е {| 
ро51Е1о0оп: абзо1иаеЕе; 
1еЕЕ: 10рх; 
ЕБехе-а]190: утове: 
утасн: 165рх; 

Бор: 95рх; 

} 

#зирроге1тпатехес НЗ { 
магалп: 0 8рх 0 Зрх; 
} 

#ехр]1апаЕ1оп, #раге1тс1раетоп { 
Е] оаЁ: ТеЕЕ; 
итаЕН: 290рх: 

} 

#БепеЕтез ( 

ЕТоаЕ: 1еЁЁ; 

\заЕв: 150рх; 

} 

#геаи1гемепес { 
ЕТоае: 1еРЕ; 
утасй: 500рх; 

} 


Так гораздо лучше (рис. 6). Теперь вернемся к про- 
блеме масштабируемого текста. 


Проблема 
масштабируемого текста 


Иногда текст, слишком длинный для отведенной под 
него области, начинает перекрывать другие элемен- 
ты, поскольку при абсолютном позиционировании 
элемент исключается из нормального потока докумен- 
та. Как это выглядит, можно увидеть, просмотрев стра- 
ницу с текущими стилями в браузере, поддерживаю- 
щем масштабирование текста, для которого задана 
единица измерения рх, — например, в Ртефох. Попро- 
буйте увеличить размер шрифта и полюбуйтесь, что 
произойдет со списком вариантов дизайна в нижней 
части страницы (рис. 7). 


ай Реконстр 


Конечно, стили для этой области еще не совсем гото- 
вы, но проблема останется, если не позаботиться о ней 
прямо сейчас. Возможно, вы уже обратили внимание, 
что элемент #11пК15е абсолютно позиционирован 
вверху страницы (свойство Сор равно 0), но смещен 
вниз за счет того, что свойство раЯЯ91па-Еор равно 
480 рх. Задание такого отступа располагает список ва- 
риантов дизайна ниже остальной части страницы на 
промежуточной фазе верстки страницы, но в конечном 
счете это неважно, так как оба вложенных в него 1 у 
все равно будут позиционированы абсолютно, поэто- 
му отступ не сыграет роли: 
#$1зетесЕе, #]атгсНтуез, #1гезоцгсев { 
роз1Е1топ: абзо1асе; 
кехЕ-а11ап: 1еЕс; 
рааа1та: б5рх: 
} 
#1зетесс { 
мтаЕн: 1590рх; 
сор: 46бей: 
Баскагоцпа-соТог: 
} 
#]агср1уез { 


ВЕВЕЭСЕ; 


итаЕН: 300рх; 
ор: 49ем; 
1еЕё: 75рх; 

} 

#]гезомгсез { 
мтаЕен: 800рх; 
1еЕЕ: 400рх; 
Бор: 49епт; 


} 


Поскольку свойство Еор каждого @1\ задано веди- 
ницах ем, а не рх, то положение верхнего края бу- 
дет меняться при изменении размера шрифта, что 
позволит избежать перекрытия. А после примене- 
ния дополнительных стилей, показанных ниже, спи- 
сок вариантов дизайна и список архивов в нижней 
части страницы станут, наконец, выглядеть так, как 
показано на рис. 8, 
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Рис, 8 4 Ссылки в хвостовике страницы после применения стилей 


СОВЕТ 


Применение значений, измеренных в ет, в сочетании с аб- 
солютным позиционированием заставляет браузер вычислять 

| положение с учетом размера шрифта. Если же применяются 
единицы рх, то положение задается жестко и не пересчиты- 
вается при изменении размера окна браузера, даже если это 
приводит к перекрытию. 


ПРИМЕЧАНИЕ 


Мы еще не рассмотрели размещение картинок - в частности, 
заголовка и двух нижних изображений радиоприемника. 
Оставляем это в качестве упражнения для читателя. Впро- 
чем, со всеми стилями можно ознакомиться в оригинальном 
(5$-файле для дизайна «Радио Реп», 


Изучение возможностей 


#]ве1есе ц1, 
мага1п: Орх; 
рааа1та: Обрх; 

} 
#]ве1есе #3 { 

пато1т: 0 10рх 00; 

со1ог: #555244; 

Бопё-в12е: Вр; 

Г]1оаЕ: 1еЕЁ; 

Еопе-мезайе: Ъо1а; 

} 
#15е1есе 11 { 

всоТог: #000000; 

11вЕ-зЕу1е-буре: попе; 

Е1оаЕ: ТеЕЕ; 

Богаег-1еЕЁ: 4рх в011а #ЕВЕВЕЕ; 
рааЯ1т9: 0 5рх; 

} 
#1зе1есЕ а:11пК, #1ве1есЕ а:\у1втсеа { 
Богаег: попе; 

гехс-аесогаетоп: попе; 

ЕопЕ-51=е: 86; 

ЕопЕ-мезоре: Бо19; 

} 
#]1зе1есЕ а:Воуег, #1зе1есЕё а:асЕ1уе { 
ЕехЕ-десогаЕТоп: чиаег11пе; 

} 

#]зе]1есс а.с, 
а: у в1еея.с ( 
со1о0г: #422222; 
ЕопёЕ-мезлайЕ: погма1; 
} 


#]агсНтуез и1, #]гевоцгсев 1] { 


#]1зе1есе а;1]1пК,с, #15е1есЕ 


Изучение возможностей 


Простые на первый взгляд свойства С5$ при ближай- 
шем рассмотрении могут порождать интересные вза- 
имодействия. Так, фоновые картинки, присоединен- 
ные к элементу Боду с атрибутом Е1хея, дают 
любопытный эффект перемещения подвижного кон- 
тента по неподвижному фону. В «Радио Геп» этот 
эффект нашел прекрасное применение, но в С$$ есть 
и много других возможностей, открывающих широ- 
кое поле для экспериментов. 


Дизайнер Роб Шилдс (КоБ 5№1е[4$) 


улм\!.с5$хепдагдепт.сот/093 


К ЮГ 
от Границы 


Контент, загнанный в стойло с помощью полей 
и позиционирования 


ани — и . у Е ое АБ, г рее. — 2 Е == | 


Большая доза кофеина - это как раз то, что 
надо, чтобы подстегнуть воображение. В на- 
шем случае идеи посетили Роба Шилдса пос- 
ле приема толики горячего чая. Уж не знаем, 
что там было намешано, но в результате по- 
явилось никак не меньше 50 идей - в виде 
ключевых слов, описывающих общую тему 
сайта. 

В конце концов Шилдс остановился на третьей 
идее — теме Юго-Запада. Он не стал заранее 
ограничивать свое воображение, решив, что 
найдется место для любой полезной картин- 
ки. После чего запустил А4оБе РАоюзВор и 
работал сграфикой, пока не нашел понравив- 
шуюся композицию (рис. 1). Немного подпра- 
вив картинки в РЬо‘о$Вор, Шилдс приступил 
к кодированию С55, и в результате получился 
дизайн «К югу от границы» с четко выражен- 
ной темой. 


Рис. 1 + Графика, использованная в дизайне «К югу от границы» 


Стилизация контейнера 


Начнем с простого 


Один из интересных аспектов работы Шилдса — это 
выбор цветовой гаммы, накоторую его вдохновил вид 
коричневого костюма в синюю полоску. Он подгото- 
вил площадку для работы, задав светло-синий фон в 
элементе Боау, светло-коричневый и более темный 
оттенок синего -— для ссылок и белый цвет для основ- 
ного текста, расположенного на темно-синем фоне: 


Боау { 
Гоппе; 83%/150%; 
сотог: #ЕЁЕ: 


Баскогоицпа: #ЕЩЕШЕО иг1 (Баскагоципа. 91) 
гереаЕ-у Г1хеа БоЕЕом сепЕег; 

пага91п:; Орх; 

рааатта: Орх; 

} 


Шилдс намеренно задал размер шрифта в процентах, 
чтобы он мог масштабироваться. Эффект от такого 
управления шрифтами и фоном показан на следую- 
ей странице. 


Стилизация контейнера 


Задав основные свойства (опущенные здесь фраг- 
менты таблицы стилей можно посмотреть в исход- 
ном С$5$5-файле), можно переходить к стилизации 
раздела #сопсазпег. Ниже приведены стили для 
присоединенной к контейнеру фоновой картинки, 
полей и ширины: 

#сопразпег { 

ро5161оп; ге1астуе; 


БаскагочцпЯ: иг1 (Ба-сепега1.31Е) гереаЕ сор 
Т1еЕЁЕ; 
паго1п: Орх ашбо Орх ацбо; 


утаЕЙ: 
} 


655рх; 


Разумеется, #сопЕа1пехг позиционирован относи- 
тельно, а поскольку свойства сори 1еЕ{ остались не- 
заданными, то этот элемент остался в нормальном 
потоке. Тех, кто только приступает к изучению С$$5, 
часто вводит в заблуждение слово «относительное». 
Кажется, что речь идет о позиционировании относи- 
тельно какого-то другого элемента, Это естественная, 
но совершенно неправильная интерпретация. 


Относительное позиционирование позволяет раз- 
местить элемент, не изымая его из нормального 
потока. Это совсем не то, что делает браузер с эле- 
ментами, позиционированными по-другому, напри- 
мер абсолютно. Очень скоро вы отчетливо увидите 
разницу. 


А пока наша цель — создать контейнер, визуально ок- 
ружающий находящиеся внутри него элементы. Пос- 
ле применения стилей к разделу #сопЕатпег (см. 
оригинальный С55-файл), можно заняться дополни- 
тельной стилизацией содержащихся в нем элементов 
(рис. 2). 


Взнуздаем текст 


Теперь основной текст следует отодвинуть от краев 
объемлющего контейнера. Это достигается заданием 
полей для каждого Я1у внутри элемента #сопса1пег: 


#11пего ( 
магазп:0рх; 

} 
наиаскбимтагу, 
маротп; 
} 
#раденНеааег { 

тага1п;: 0рх; 

} 

#зиррогё1паТехе { 

мага1п: Орх 200рх Орх 68рх; 
} 


#ргеашЬ1е { 
Орх 200рх 0Орх 68рх: 


При такой установке полей текст занимает нужное 
положение (рис. 3). 


В шапку их! 


Добавление графических заголовков — в особенности 
для элемента #раденеааег 11 —уравновешивающих 
текст, приближает дизайн к окончательному виду: 


#радеНеааег №1 ( 
шаго1п: Орх Орх Орх 0рх; 


Баскагоцпа; сгаперагепЕ це] (Еор.91Е} по- 
гереаЁ Гор 1еЁЁ; 

мтаЕн: 655рх; 

РезанеЕ: 206рх; 

} 


Нарис. 4 показано, как выглядит страница после при- 
соединения картинки к элементу #радеНеааехг В1. 


у. Реконструкция | — 


ПРИМЕЧАНИЕ - 
Термином «нормальный поток» описывается способ обработ- 
ки браузером непозиционированных элементоз. Если удалить 
все стили из любого варианта дизайна (55 2еп бат4еп, то текст 
и заголовки будут располагаться слева направо, сверху вниз, 
плавая в зависимости от разрешающей способности экрана 
и размера окна браузера. 


= Беацу от © 55 безе 


Рис. 2 + Для раздела #сопеа1пег заданы позиция, ширина, 
поля и фон 


-55 Реп Сбагдеп 


Ве Везиуву ог 255 бел 


Рис. 3 + После задания полей для основного текста 


Рис. 4 + Присоединение картинки к #раденеааех 
подчеркивает тему и задает общий тон дизайну 


| Ре 


Рис. 5 + На картинках в заголовках изображен стручок перца 
чили, подчеркивающий тему Юго-Запада 


\МПу рагНСра? Рог гесосп Чоп, пэрта@оп, апд а гезоцгсе \уе 


сап ай гегег 10 упеп птаКпо {Пе сазе юг С55-Базед дезеп, Тиз 


15 $зогей пеедед, еуеп \одау. Моге ап@ тоге та]ог $Цез аге 


какие (Ле (вар, Би по епоцей Вауе, Опе дау 1/15 саЦегу Ц Бе 


а мМюпса| сипоз$ИКу; Ла 9дау 15 по {одау. 


Рис. 6 + Рамка, добавленная к разделу #Бепе1Ез, разделяет 
соседние фрагменты текста 


А теперь хвостовик 


Еще несколько достойных внимания примеров заго- 
ловков из С55-файла помогут понять, как с помощью 
задания полей, фоновых изображений и ширины с 
высотой можно эффективно управлять положением 
графики и текста: 


#ргеащЬ1е |3 { 

Баскагоцпа;: ЕгапврагепЕ цг1(с81,91Е) по- 
гереаг Еор 1еЕЕ; 

пага1п: 10рх 0рх 5рх 0рх; 

утаЕв: 388рх; 

Гезайе: 44рх; 

} 

#БепеЕ1теЕз 13 { 

Баскагоцпа: Есгапзрагепе иг! (сНа.д1Е) по- 
гереаЕ Сор 1еЕЕ; 

агат: 10рх 0рх 5рх 0рх;: 

утаЕН;: 388рх; 

Нетане: 44рх; 

} 

+геац1гемепев И3 { 

Баскагоцпа: сгапзрагейЕ иг1(с15.91Ё) по- 
гереаб сор 1еЁС; 

пага1п: 10рх Орх 5рх Орх; 

улаЕн: 388рх; 

ВетанЕ: 44рх; 

} 


Теперь заголовки удачно сочетаются с прочими эле- 
ментами на странице (рис. 5). 


Наконец, мы видим, как выглядят синие рамки: 


#БепеЕтев { 
Богаег-Боббош: 1рх аазНеа #8095АЕ; 


} 
#ргеамЬ]1е ({ 

Богаег-Бобссом: 1рх аазНеа #8095АЕР; 
} 


Рамки добавляют зрительный контраст и одновремен- 
но выступают в роли разделителей между фрагмента- 
ми текста (рис. 6). 


А теперь хвостовик 


Теперь, когда центральная часть страницы оформи- 
лась, можно заняться хвостовиком. Его содержимое 
просто: ссылки На инст рументы контрол ЯиИ фоновая 
картинка С ГОЛОВОЙ коровы; 

#Гообсег { 

гкехе-а]11ап;: сепеег; 

Баскагоипа: ЕгапзрагепЕ цг1 (БоЕЕом.91Е) по- 

тереаЕ гор 1еЕ(; 

ВезаНе: 37рх; 


к 


| 20) Реконструкция $ | 


паго1п: Орх -200рх Орх -68рх; 
раЯЯа1п9-Еор: 88рх; 

} 

#Еоосег а:]1иКк, #Рообег а:у\у1516еа ( 
магати-утаНе: 20рх; 

} 


Обратите внимание на отрицательные поля слева и 
справа: они помогают удержать хвостовик в границах 
объемлющего элемента (рис. 7). 


Абсолютное 
позиционирование 


Вы не забыли, что элемент #сопеалпег позициони- 
рован относительно: Так вот, список ссылок абсолют- 
но позиционирован внутри относительно позициони- 
рованного атм: 
Ч]окьаве { 
ро51Е1оп: абзоиие; 
Кор: 207рх; 
тоне: брх; 
из аеВ: 181рх; 
} 


В результате список ссылок оказывается сбоку от ос- 
новного текста. В отличие от относительного, при аб- 
солютном позиционировании элемент размещается 
относительно своего родительского элемента'. Если 
такового не существует, то вычисляется позиция от- 
носительно корневого элемента ПЕ]. 


Чтобы наглядно увидеть, что происходит, достаточно 
отменить относительное позиционирование для эле- 
мента #сопса1пех (рис. 8). 


Природа абсолютного позиционирования такова, что 
элемент позиционируется относительно позициониро- 
ванного объемлющего элемента или относительно эле- 
мента Вет] , если объемлющего не существует. Когда с 
непосредственного родителя снято относительное пози- 
ционирование, элемент #11115 позиционируется 
относительно корневого элемента. После восстановле- 
ния относительного позиционирования для элемен- 
та #сопса1пег дизайн снова выглядит, как задумано. 


На самом деле, относительно ближайшего позиционированного 
(относительно или абсолютно) предка. — Прим. нер. Рис. 7 4+ После добавления хвостовика 


Рис. 8 + Позиционированный элемент #11пкь1еЕ потерял 
связь с объемлющим его элементом а1у #сопсалпег 


СОВЕТ 


Это свойство модели позиционирования полезно для верст- 
ки, посколько позволяет определять точки отсчета для абсо- 
лютного позиционирования. Если ни один из предков не по- 
зиционирован, то абсолютная позиция отсчитывается 


| от положения элемента Нем], то есть от краев окна браузе- 
ра. В противном случае позиция отсчитывается от краев бли- 
жайшего позиционированного предка. 


— ——=ШшШ=Я=ПЯПДЯПЯЙЫйЙйЙй=й=д2А2А..—ы=ы т 


Все по местам _ 


Как воспользоваться этой возможностью, если роди- 
тель не позиционирован? Задайте для родителя свой- 
ство ро51 101: ге]ас1уе; , не указывая ни Сор, ни 
1еЕ6; на фактическом положении родителя это неот- 
разится, зато установит новую точку отсчета. Подроб- 
нее на эту тему читайте статью Дугласа Боумена 
«Макте {Ве АБ5оцце, Ве]аНуе» на сайте 5${ор4езеп 
(мимгиг.ордеярт.сот/агиез/абзои{е). 


Закончим со ссылками 


Поместив элемент #11пК1156 в нужное место, мож- 
но применить к нему дополнительные стили. Прежде 
всего нужно задать поля и отступы равными 0: 
#111Кко1вЕ и1 ({ 
пага1п: Орх; 


рааа1па: Орх; 
) 


Далее в С55-файле следуют другие стили для ссылок, 
в том числе для отдельных элементов списка: 
#]11"аКкЬтее 11 { 
118Е-в6у1е-Еуре: попе; 
Баскагоцпа: сгаперагепЕ иг1(11-69.91Е) гереаЕ 
сор сепсег; 
рааЯа1па: Врх 6рх 8рх 6брх1 
пагатп: Орх; 
Богаег-вор: 1рх $0114 #504831; 
Богаег-БоЕгом: 1рх в011а #221609; 
Я91ер1ау; Боск; 
} 


Дополнительные стили для заголовков в списках ссы- 
лок, задания цветов, полей и отступов вы сможете най- 
ти в оригинальном С$5-файле. 


Все по местам 


Для эффективного контроля над текстом и изображе- 
ниями можно пользоваться полями. Относительное 
позиционирование позволяет загнать самые непокор- 
ные элементы в стойло, поскольку с его помощью 
можно создать контейнер, в котором уже размещают- 
ся абсолютно позиционированные элементы. Работа 
«К югу от границы» дает прекрасный пример четкой 
темы и бесхитростного способа ее реализации с по- 
мощью С55, 
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Дизайнер Дерек Хансен (Пегек Напзеп) 
имим.сз52епдаг4еп.сот/095 


Корпорация 
Деп\иОГК$ 


От конкуренции к согласию 


ЧЕ 2 3: НЕ равыы т ме очася 


Впервые открыв для себя сайт С55 Геп 
Саг4еп, Дерек Хансен был поражен глубиной 
идеи и усилиями, затраченными на создание 
многих представленных работ. Поскольку 
он в тот момент переходил к дизаину на ос- 
нове стандартов, то предпосылки к представ- 
лению собственного варианта дизайна уже 
существовали. 


Хансену хотелось сделать что-то уникальное, 
Он тщательно исследовал все уже имеющцие- 
ся варианты. Больше всего ему понравились 
работы с четко выраженной темой, и он ре- 
шил, что нужно создать нечто, содержащее в 
себе целый рассказ, но при этом отличное от 
всех прочих вариантов дизайна, представлен- 
ных на сайте. В результате получилась «Кор- 
порация /еп\УУогК$». 


7-го УУоткз 


& пир таи ог сие иниьси 


Рис. 1 + Графика, использованная в «Корпорации еп\/огК$» 


Рис. 2 + Часть основного фона и шрифты в «Корпорации 
Сеп\/огК$». Заголовки уходят за левый край вследствие 
отрицательных значений полей, а текст очень близко подступает 
к краю документа 


ПРИМЕЧАНИЕ - 


Использование шрифта (ис1а бгапде для заголовков и 
беогдта для основного текста - это простое средство дости- 
‚ жения элегантного результата. Хансен объяснил, что не хо- 
тел злоупотреблять типографией, главным образом потому, 
что старался уменьшить вес страницы и свести применение 
‚ графики к минимуму. Из-за этого самоограничения резуль- 
тат походит на реальный корпоративный стиль письма, так 
что идея работает. 


10 Зак. 1942 


ыы —___ ыыы адишие _ - — 


Бумагу, пожалуйста 


Возьмем 
фирменный бланк 


Как во всяком хоропго написанном документе, в «Кор- 
порации Деп\М/отК$» уделено много внимания удобной 
организации и простому представлению контента 
(рис. 1). Серебристый фон и простые шрифты задают 
общий тон: 


Боау { 

раскакоциа: #999 цхк1(ЪК.9ра) 
пага1п: 0; 

рааа1тпа: 0; 

со1ог;: #331408; 

ЕопЕ-Еат11у: Сеогата, Т1мез, зег1Ё; 
Еопе-в12е: 80%; 

} 
01.12, 1п3,198.15, 56 { 

Богаег: 0: 

мага1п: 0; 

раЯЧ91т9: 0; 

Еопе-Еат1]у: "Гас18а Сгапае”, 
Оп1соае", Уегаапа, 

вапз-зег1Ё; 

Еопе-мезане: похгма]; 

} 
3 { 

сехе-сгапвЕогщ: иррегсазе; 
Еопе-812е: 90%; 

иога-зрас1па: 2рх; 
1ессег-врас1па: 2рх; 
пага1п-1еЕЕ: -10рх; 
ЕопЕ-метаНе: Бо1а; 

} 


гереае-х Ё1хей; 


"1л1с1аа бапз 


Обратите внимание на отрицательные поляу элемен- 
тов НЗ (рис. 2). Сейчас это выглядит немного стран- 
но, но, когда мы доберемся до конца, станет ясно, что 
это придает странице дополнительное очарование. 


Бумагу, пожалуйста 


Следующий итаг- поместить текст на бумагу и начать 
визуально организовывать слова. Для этого к разделу 
+сопса1пех применяется следующий стиль: 


фсопсазпег { 

итаЕн: 750рх; 

БаскогомпЯа: цг1(рарег_л1а.91ЁЕ) гереас-у; 
пага1п: 50рх 0 0 25рх; 

радЯ1па-Бобсом: 20рх; 

} 


Реконструкция 

В результате для контейнера задается фиксированная 
ширина 750 пикселей и добавляется основной графи- 
ческий образ листа бумаги, который повторяется 
вдоль вертикальной оси. Кроме того, для элемента 
#сопсалпех устанавливаются поля и отступ вдоль 
нижнего края, чтобы оставить немного пустого мес- 
та. Хотя из-за полей элементы В 3 немного сдвинулись, 
они все еще находятся не там, где нужно (рис. 3), но 
вскоре мы это исправим. 


Фирменный логотип 


Поскольку в основу дизайна положен образ фирмен- 
ного бланка, необходимо добавить фирменный лого- 
тип и соответствующие картинки. Вот как логотип 
присоединяется к элементу №1: 


#ёраченеааег ( 

ВезаНеЕ: 100рх; 

рааа1тп9: 20рх 0 20рх 50рх; 

} 

#радеНеа4ег №1 { 

НетанеЕе: 90рх; 

итасн: 340рх: 

Баскагоцпа: аг1(2еп_10о90.91Ё) по-гереае; 
} 


Следующее правило скрывает текст логотипа, остав- 
ляя картинку: 
#рачеНнНеааег №2 врап, #радеНеааег №1 зрап { 
Я15р1ау: попе; 


) 


Теперь самое время установить поля для заголовков и 
текста: 
#111Ккы15Е, #виррогс1паТехе, #ргеатЬ1е { 


мага1п: 10рх 100рх 10рх 200рх; 
} 


Логотип оказался там, где иему и полагается быть, в 
левом верхнем углу листа (рис. 4). Помимо логотипа, 
на странице присутствует еще и цитата, не без юмора 
подписанная инициалами С.5.5. Достигается это пу- 
тем применения к элементу #аи1скбитмтагу прави- 
ла, которое позиционирует цитату, скрывает находя- 
щийся под ней текст и стилизует текст внутри раздела: 

#ао1скешитагу { 

ров16101;: абво1щаее; 

Сор: 50рх; 

1еЕЁ: 450рх; 

Баскагоцпа: иг] (варсехе.а1Е) по-гереас; 

Везаве: 100рх; 

иТаЕН: 280рх; 
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Рис. 3 + Часть фона в виде листа бумаги с заданной шириной, 
полями и отступами для элемента тсопеалзпег 
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Рис. 4 + Добавление фирменного логотипа. Пока что видно 
содержимое раздела #аи1скЭиитаху, его еще предстоит 
стилизовать 


ИЕтсимоткь 


ь зтизтим ви ТК 


Рис. 5 + Страница стала больше похожа на фирменный бланк 


ОИ 
ВАТЫ, 20 СЕ Ма 2 — 


Рис. 7 + Использование раздела #тоо{ег для стилизации 
верхней части страницы 


ПРИМЕЧАНИЕ 
Если бы вы специально разрабатывали ХНТМ\ -разметку под 
| этот дизайн, то для раздела #Еоосех следовало бы приду- 
мать какое-то другое имя, более соответствующее его распо- 
ложению. То, что хвостовик вынесен в верхнюю часть страни- 
цы, обусловлено природой сайта (5$ Реп батдеп. Зато мы 
наглядно продемонстрировали, что любой элемент можно аб- 
солютно позиционировать в произвольном месте страницы, 


Размещение ссылок 


#утскбытитатуи р.р1 

Я41=р1ау: попе; 

| 
#отскбоммату р.р2 { 

рааа1та: 78рх 0 0 15рх; 
ЕопЕ-втЕе: 10рх; 

Еопе-Еаша]у: «Гоас3заа Сгапае», 
Цп1соае», Аг1а1, 
запз-зег1 Е; 


} 


«1с14а Зап 


Сочетание графики и стилизованного текста создает 
впечатление традиционного фирменного бланка (рис. 5). 
Но верхний край бумаги, пожалуй, излишне ровный. 
С помощью дополнительных Я1\, присутствующих 
в ХНТМГ-разметке, Хансен добавил фоновое изобра- 
жение, исправляющее этот недостаток: 


#ехегао1\1 { 

роз\Слоп: абзоиие; 

сор: 20рх; 

1еЕЁ: 23рх; 

утаЕН: 750рх; 

Ве1занЕ: 50рх; 

Баскагочпа: иг1 (рарег_Еор.91Ё) по-кереас; 
} 


Заметьте, что за счет абсолютного позиционирования 
удалось точно совместить верхний край листа бумаги с 
остальным содержимым страницы (рис. 6). Чтобы по- 
кончить с приданием корпоративного облика страни- 
це, применим кэлементу # Еоосег стиль, который по- 
зиционирует его в верхней части, сразу под логотипом: 


#Еообек { 

роз1е1оп; абзоиее; 

гор: 160рх; 

1е1Е: 150рх; 

ГопЕе-312е: 80%; 

Ботдег-Сор: 1рх 5011@а #6Е512Е; 
раЯаЯ1па-Еор: Зрх; 

итаЕН: 575рх; 

Еехс-Егапв ога: иррегсазе; 
ЕехЕ-Яесогаезоп: попе; 
ЕопЕ-Еат11у;: «ис1Яа Сгапае», 
Оптсоае», Аг1а\, 

Бапз-5ег1 Е; 

} 


«ллс1тда сапе 


Это дает нам список ссылок и сплошную разделитель- 
ную линию, после чего шапку бланка можно считать 
готовой (рис. 7). 


Размещение ссылок 


Хансен решил, что у каждого набора ссылок должен быть 
свой визуальный облик. Поля для элемента #\1лК1 1$ 
уже установлены, а стили для раздела Зеес{ а Оез1еп 


вы найдете в оригинальном С$5-файле- поищитетам 
селекторы #15аес! и #|агс1уе$. В результате получает- 
ся симпатичный список ссылок и область навигации 
по архивам, расположенная внизу страницы (рис. 8). 


Немного 
индивидуальности 


Кто сказал, что корпоративная тема должна быть по- 
добна пиджаку, застегнутому на все пуговицы? Хан- 
сен добавил ряд неформальных черточек. Во-первых, 
с листом бумаги скреплена записка, для этой цели за- 
действован селектор #радчеНеааег 12: 


#рааеНеааег 12 { 

БаскагочпЯа: цг1 (рарег_с11р.91Е) по-гереас; 
итаЕВ: 320рх; 

Везане: 262рх; 

роз1Е1оп: абзо1щса; 

Бор: 250рх; 

]1еёс: -6рх; 

#-1паех: 5; 


} 


Как и раньше, с помощью абсолютного позициониро- 
вания Хансен сумел поместить изображение точно туда, 
куда хотел. Под запиской «наклеен» листочек, на кото- 
ром разместились ссылки на ресурсы. Стили для ссы- 
лок посмотрите сами в исходном С$5-файле, а вот спо- 
соб позиционирования листочка мы покажем здесь: 


#]1гевочгсев { 

роБ1Е1оп: абБёо1асе; 

Бор: 600рх; 

1еЁёе: 10рх; 

утасн: 200рх; 

ВезаНе: 257рх; 

БаскагоипЯа: иг] (3Е1СКу.91Ё) по-гереае; 
Еопс-Еам1]у: «лс1аа Сгап@е», «ас18а бапз 
Оп1соае», Аг1а1, 
вапв-зег1Ё; 

со1ог: #000; 

| 


Теперь в левой части страницы есть два абсолютно 
позиционированных элемента, придающих ей более 
реалистичный вид (рис. 9). Последний визуальный 
элемент — для полноты картины - это ручка. Чтобы 
поместить ее в нужное место, Хансен воспользовался 
селектором #ехегар1 2 и, конечно же, абсолютным 
позиционированием (рис. 10). 

#ехегар1у2 { 

роз1С1о0п: абзо1щЕе; 

сор: 900рх; 

1еЕЕ: 700рх; 

Баскагоцпа: иг1(реп.91Е) по-гереае; 

эЗаЕН: 140рх; 

ВезанЕ: 547рх; 


Рис. 8 + Дизайн ссылок на архивы 
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. | Можно отсылать 277 


ТНЕ КОАО 8 ие 129 


Можно отсылать 


Для создания уникального, ни на что не похожего ди- 
зайна работа «Корпорация ГепМ/отК$» опирается на чет- 
ко определенную тему. Несмотря на некоторые слож- 
ности - к примеру, ограничения в использовании 
шрифтов и невозможность с помощью прозрачного 
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Рис. 9 + Изображения приколотой скрепкой записки и 
приклеенного листочка абсолютно позиционированы 
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Рис. 10 + Ручка дополняет картину и не дает корпоративному 
имиджу стать уж слишком серьезным 


Дизайнер Рэй Генри (Кау Непгу) 


ммм. с$5тепдагдеп.сот/090 


Открытое окно 


Один дизайн, три макета 


На работу «Открытое окно» Рэя Генри вдох- 
новила фотография, которую он сначала пла- 
нировал использовать в качестве главного 
визуального элемента. Но убоявшись, что 
результат будет слишком предсказуем, он ре- 
шил поискать новые подходы. Ему приходи- 


о 
Е нА : 
а а ас А 


о Е те 5 лось видеть верстку с фиксированными эле- 
Ч .. р” Ш ментами для навигации и баннеров, но 
никогда не встречался дизайн, где бы наибо- 
лее существенные элементы размещались в 
нижней, а не верхней части страницы. 


Так как Ицегипе! Ехрюгег для МЛпао\$ не под- 
держивает фиксированного позиционирова- 
ния, то Генри понимал, чтоему придется при- 
ложить дополнительные усилия для того, 
чтобы дизайн выглядел приемлемо в разных 
браузерах. Поэтому он прибег к различным 
трюкам, чтобы во всех современных браузе- 
рах был виден тот или иной аспект «Откры- 
того окна». 


Рис. 1 + Графика, использованная в «Открытом окне», включая 
и фотографию, послужившую источником вдохновения 


Рис. 2 + Основа: страница выглядит одинаково во всех браузерах 


Стилизация раздела Ито ИД 


Фундамент 


Начав с элементов роду и сопЕа1пек, Генри отклю- 
чил выставляемые по умолчанию поля и отступы и 
задал шрифты: 


Боду#сз5-геп-дагаеп { 

Баскагомпа: #А18в4С0; 

мага: 0; 

рааа1п9: 0; 

Еопе-Еат11у: Уегдапа, аг1а]1, вапз-вег1Ё; 
Еоле-в1хе: 11рх; 

} 


Далее он задал для блока #сопЕа1пег ширину 100%, 
выбрав тем самым текучую верстку, при которой стра- 
ница заполняет всю площадь окна: 


#сопсазпех ( 
изасн: 100%; 
кехе-а11дщ1: 1еЕС; 

} 


В данный момент верстка выглядит одинаково во всех 
браузерах (рис. 2). 


Стилизация раздела ш\го 


После позиционирования элемента #1пЕхо дизайн 
становится намного интереснее: 


#11Его { 
этасй: 100%; 

НезанЕ: 276рх; 

} 

ВЕт1>Боау @алу#1аско { 
роз1Е1оп: Езхеа; 
Босеош: Орх; 
г1ове: 0; 

} 


НЕ *#1щего ( 

Богаег-БоЕЕот: Зрх в011а #ЕЕЕ; 
роз1ЕТоп: Е1кеа; 

Боббом: -10рх; 

} 


#1иего { 

Незане;: 286рх; 
\о1се-Еащ11у: "\"}\""; 
\уо1се-Еат11у: 1пВег1е; 


ЛетанЕ: 
} 


ацео; 


7: Реконст 


укция 


В этих правилах вы найдете целый ряд приемов, при- 
званных «подсунуть» каждому браузеру свой стиль. 
Первый селектор #1пЕго распознается всеми браузе- 
рами. Следующие два правила предназначены только 
для браузеров, поддерживающих фиксированное по- 
зиционирование, при этом третье содержит описание 
рамки, которое Пиегпе! Ехрюгег 6 для МПп4о\$ интер- 
претирует правильно. Наконец, вы видите трюк на 
основе модели прямоугольных областей (Вох Моае! 
Наск), которым Генри воспользовался, чтобы компен- 
сировать ошибку при вычислении высоты в правиле 
#1п6го, характерную для Ицегпе! Ехр|огег 5. 


Теперь в Пиегпе! Ехр]огег раздел #1п2го находится 
в верхней части страницы (рис, 3) и имеет белую 
нижнюю рамку, В то же время в браузерах Мо2Ша и 
баРат этот раздел фиксирован и расположен внизу 
(рис. 4). 


Вверх, вниз, 
вправо, влево 


На данный момент верхняя и нижняя части страницы 
определены. На самом деле это, конечно, один и тот 
же раздел. Продолжая применять фильтрацию, Генри 
добавил стили, которые отображают структурные эле- 
менты в нижней или верхней части в зависимости от 
браузера. 


Шаг вправо... 


Сначала добавляется фотография, которая определя- 
ет цветовую гамму: 


#рачеНеаЯег { 

Баскагоцпа: иг] (радеНеаЯ_Ба.7]ра) по-гереае 
сор ТеЕе; 

мзаЕй: 332рх; 

Незане: 283рх; 

роз1тЕтоп: абзоциее; 

ЗОНЕ: 0; 

Бор: 0; 

} 


Это правило позиционирует раздел #радеНеа@ет и 
в пегпе! Ехрюгег (рис. 5), и в Мо2Ша, хотя, как види- 
те, положение определяется относительно того места, 
куда браузер поместил фиксированный раздел (рис. 6.). 
Интересно, что в браузере Орега картинка пока не вид- 
на, с этим еще предстоит повозиться, 


Рис. 3 + |пегпе{ Ехрогег: раздел #1пегко находится наверху и 
отделен нижней рамкой белого цвета 


Рис. 4 + Мо2Иа (и Заап): раздел #1иЕ го фиксирозан в нижней 
части страницы и перекрывает расположенный в том же месте текст 


Рис. 5 4 В щегпе! Ехрогег фотография оказывается в правом 
верхнем углу страницы 


Рис. 6 + В Мо7Ша фотография оказывается в правом нижнем 
углу страницы, и пока мы ее полностью не видим 
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Прыжок влево... 


Следующие правила С$$ задают стиль для раздела 
#ргеашо1Те, правда, из соображений экономии места 
мы не приводим некоторые правила для внутренних 
элементов: 


#ргеамЬ1е { 

Рис. 7 + В шегпе! Ехргег раздел #ргеамЬ1е БаскагоцпЯ: #А184С0о иг] (ргеапЬ1е Ъа.01) 
позиционирован в левом верхнем углу гереак-у сор клане; 

НезанЕ: 283рх; 

итаей: 312рх; 

махта1п:; 0; 

рааа1та:; 0; 

ро81Е1оп: абзо1щиее; 

1еЕс: 0; 

сор: О; 

) 
Нст1>Бо4у #ргеамЬ1е { 

ро$1Е1оп: абзо1аее; 

Тео: 0: 
Рис. 8 + В Мо2Ща (и загап) раздел #рхеамЬТе, } 

как и традеНеааехг, воще не виден полностью 


Снова вы видите, как селектор #ргеамЬ Те задает спо- 
соб позиционирования блока (рис. 7), причем для бра- 
узеров, поддерживающих селекторы дочерних эле- 
ментов, этот блокв следующем правиле прижимается 
к левому краю (рис. 8). 


ПРИМЕЧАНИЕ 


Подробнее о трюке Вох Моде| НасК читайте на странице ПЁр:// 
фагцек.сот/С$$/Ехатр(ез/Бохтоде[Наск. Вет. 


А теперь в середину 


Раздел #аа1ск5иалиаагу Генри поместил точно посе- 
редине между #рачеНеааег и #ргеать1е: 


гацтскоишлату { 

Баскагоцпа: иг] (чатскбом_69.91Е) гереаЕ-х вор 
топе: 

Ботаег-ктаНне: Зрх з011а Ё#ЕЕЁЕ; 

паго1т: 0 ета . ВЫ 

‚раяа1та: 52 О м 


Е: 2836 


и 


Рис. 9 + В |пеглё{ Ехр!огег раздел оказался вверху И "уотеетеаиу:. 
Незтайе: 231рх; 


} 


Единственный трюк здесь — это Вох Моде! Наск в разде- 
ле #ао1скбитаагу. Он нужен, чтобы исправить ошибку 
при вычислении высоты в браузерах, где некорректно 
реализована модель прямоугольных областей. 


В этот момент все три варианта верстки более-менее 
видимы, В Ицегпе! Ехрогег раздел отображается це- 
ликом вдоль верхнего края (рис. 9), а в Мо2Ша он ви- 
ден частично и находится внизу (рис. 10). Кстати, кое- 
что начало уже проявляться и в браузере Орега (рис. 11). 


Язи Реконструкция | 


Стилизация контента 
и ссылок 


Следующий шаг- применить стили к контенту и ссыл- 
кам. Все правила можно посмотреть в исходном С55- 
файле на сайте еп Саг4еп, но некоторые наиболее ин- 
тересные заслуживают упоминания здесь. Прежде всего, 
обратите внимание на то, как с помощью свойства 
ЕТоаЕ контент перемещен в левую часть страницы: 

#йзиррогЕ1паТехе ({ 

узасп: 100%; 

Е1оафз: 1еЕЕ; 

шагаи-г1айе: -332рх; 

тага1п-бор: -3рх; 

} 


Интересно отметить, что даже при ширине 100% от- 
рицательные поля позволяют управлять внешним 
видом текстового контента. Отрицательное значение 
пага1п-к19айе дает тот же эффект, что положитель- 
ное значение ра@а1па-х1 ан, и гарантирует, что 
текст не выйдет за пределы области, ограниченной 
левым краем фотографии. Однако в случае, когда 
ширина равна 100%, использовать свойство райаЯ1п9- 
гзаНне нельзя, поскольку тогда ширина элемента 
#зиррогЕ1паТехе оказалась бы равна 100% + 332рх. 
К разделу #Еообег применяются стили, учитывающие 
различия между браузерами: 


#Еообег {[ 
Баскагоипа: #абедее; 
мага1п: 0 332рх 0 0; 


Богаег-г1аНЕ: Зрх в011а #ЕЕЕ; 
Богаег-вбор: Зрх во]1а #ЕЕЁЕ; 
Богаег-БоЕбот: Зрх $011а #ЕЕЕЁЕ; 
рааа1та: 15рх 0; 

сехе-а11ап: сепеег; 

} 
ВЕм1>БоЧу #Еососег { 

БаскагоцпЯа: СгапзрагепёЕ; 


роз1Е1оп: Езхеа: 


ЗОНЕ: 0; 
БоЕбом: 261рх; 
рааа1та: 0; 


мага1п: 0 160рх 0 0; 
Богдег-ктаНеЕ; 0; 
Богаег-Еор: 0; 
Богаег-Боббом: 0; 
кехе-а11ап: 1еЕЕ; 


Рис. 10 + В Мо2Ша раздел прижат к нижнему краю 


Рис. 12 + В |мегпе! Ехр|огег раздел #ЕооЕег отображается под 


контентом 


Рис. 13 + В Мо2Иа раздел #Гоогег отображается 
в фиксированной нижней части страницы 


ПРИМЕЧАНИЕ 


145. Пет. | 


Подробнее о технике применения спецификатора @теФа в 
браузере Орега 7 см. страницу иммм.утие$.сот/агсуе5/ | 


В результате хвостовик оказывается в верхней види- 
мой части страницы для И\егпе! Ехр]югег (рис. 12) ив 
нижней части для Мо2Ша (рис. 13). 


А теперь займемся 
браузером Орега 


К этому моменту мы все сделали для браузеров Имегпе! 
Ехрогег, Мо2Ша и 5аЁап, но в Орега нужно еще заста- 
вить верхние разделы отображаться правильно. Вот 
фрагмент С$$ для браузера Орега: 
@те1а а11 апа (штп-кзаенН: Орх) { 
Атуйтаего ( 
розтЕтоп: абзо1иасе; 
гтаНе: 0; 
итаЕй: 1008; 
петане: 283рх; 
гор: 0; 
=-1паех: 0; 
Богаег-БоЕсбоп: Зрх во11а #ЕЕЕЁЕ; 
} 


Этот прием использует часть спецификации С$$3 и 
позволяет адресовать стили браузеру Орега 7 и толь- 
ко ему. Вот теперь все хорошо выглядит и в Орега. 


Три в одном 


Оригинальная идея работает как задумано в браузерах 
Мо2ШЩа и ЗаРагь для Ииегпе! Ехр]огег найден обходной 
путь, позволяющий приемлемо отобразить страницу, 
а для Орега пришлось пойти на компромисс — фото- 
графия находится вверху, но, в отличие от Имегпе( 
Ехрюгег, она фиксирована, так что страница прокру- 
чивается под ней. Своим названием работа «Открытое 
окно» обязана соотношению между верхом и низом, 
найденному в результате экспериментов Генри. 
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Дизайнер Дэйв Ши (Бауе $Веа) 
мимими.с552епдагаеп.сот/025 


Мнемоника 


Дизайнерские трюки, обеспечивающие текучую 
верстку и дополнительные эффекты 


о о =) 


Текстура «Мнемоники» появилась в результа- 
те смешения органических форм со строгими 
линиями и геометрическими фигурами. Тон- 
кие усики пересекают толстые горизонталь- 
ные линии в заголовке, а резкая цветовая гам- 
ма придает неповторимость дизайну. 


В этой работе Ши хотел создать что-то со- 
вершенно новое. В результате получилась 
уникальная верстка, которой, возможно, не- 
достает внутренней красоты, зато за счет ви- 
зуальной целостности и внимания к деталям 
возникает впечатление оригинальной, хорошо 
продуманной концепции. 


Стремлением к оригинальности продиктованы 
многие решения, принятые как на этапе про- 
ектирования, так и во время кодирования. Мы 
рекомендуем внимательно прочитать хорошо 
прокомментированный С$$5-файл, находящий- 
ся на сайте Геп Сбаг4еп (угигу’.с$$хепеатАеп.сот/ 
025/025-соплтлеп!5.с$$). Отдельные изображе- 
ния, использованные в «Мнемонике», приведе- 
ны на рис. 1 ниже. 
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Рис. 2 4 Вид страницы после применения начальных стилей, 
задающих цвета ссылок и шрифты 


Рис. 3 + Первая фоновая картинка присоединена к элементу Боду 


ПРИМЕЧАНИЕ 


Цветной вариант рис. 1-3 см. на вкладке. 


Решение задач 


После применения начальных стилей (они здесь не 
приводятся, но результат показан на рис. 2) возникла 
первая проблема. Для «Мнемоники» нужны были две 
желтых картинки для фона элемента роду: одна по- 
вторяющаяся по вертикали и вторая — перекрываю- 
щая ее и повторяющаяся по горизонтали. 


БоЧу ({ 

Еопе-ет1хе: вма11; 

ЕопЕ-Еашм11]у: аг1ла1, запв-вегтЕ; 
Баскогочпа: #В0А40В п:1(63-1.91Е) Гор 1еЕс 
тереас-х; 

пата1п: Орх; 


рааЯ1па: Орх; 
} 
Нокэлементу Бо@у присоединена горизонтально по- 
вторяющаяся фоновая картинка (рис. 3), а С$$ не по- 
зволяет присоединять к одному элементу несколько 
изображений. Так что оставалось лишь использовать 
два элемента. К счастью, элемент #сопЕалпехг нахо- 
дится внутри роду и заключает в себе всю остальную 
разметку, поэтому вторую картинку можно присое- 
динить к нему: 
# сопеазпег | 
Баскагочиа: сгапзрагейпе цг1(54-2.91Е) Кор 


тланЕе гереас-у; 
} 


Это работает. Поскольку графика в этом дизайне сосре- 


доточена восновном в заголовке, то Дальше нужно было 


придумать, как интегрировать каждую картинку в рас- 
ширяющуюся полоску, идущую поперек страницы, и 
при этом сохранить единство зрительного образа. 


Организация графики 


Взглянув на окончательный вид страницы, вы заметите 
много отдельных визуальных элементов. Надо ли рас- 
положить некоторые поверх других, воспользовавитись 
абсолютным позиционированием? Или лучше сохра- 
нить все вместе в виде одного большого изображения? 


Решение находится посередине. Выбор того, какие 
элементы объединяются в один ]РЕС-файл, а какие 
выделяются в отдельные СГ -файлы, зависит от лич- 
ных предпочтений дизайнера и ограничений, нала- 
гаемых разметкой. Не существует «единственно верно- 
го» ответа, два дизайнера могут прийти к различным 
решениям. 


7]: Реконстр 


Поскольку изменять НТМГ-разметку сайта еп 
Саг4еп нельзя, то было принято решение присоеди- 
нить изображения к двум заголовкам внутри раздела 
+радчеНеааег и, быть может, задействовать сам этот 
Я1у. Таким образом, мы можем взять максимум три 
картинки, поэтому левая часть страницы (за вычетом 
левого верхнего графического уголка) была сохране- 
на в виде одного изображения, а правая часть - в виде 
другого. Третий - узкий — СПР повторяется горизон- 
тально под каждой стороной. 


Не сразу было понятно, как можно заставить такую 
графику расширяться в случае текучей верстки; каза- 
лось, что фиксированные размеры больше подходят 
для верстки с фиксированной шириной. Однако меж- 
ду двумя сторонами заголовка есть разрыв, который 
можно было бы заполнить однородными полосками, 
допускающими расширение (рис. 4). Это сделано спе- 
циально, так как Ши заранее решил, что верстка дол- 
жна быть именно текучей. 


Итак, картинки выбраны, посмотрим, как их лучше 
скомбинировать. Повторяющееся изображение дол- 
жно быть размещено под всеми остальными (рис. 5): 

+радеНеааех { 

Везаве: 171рх; 

рааа1па: Орх; 

Баскагочпа: Егапзрагепе иг] (59-4.91Е) Гор 


1еЕЕ гереас-х; 
} 


Неизменяемость НТМГ-разметки еп Саг4еп сужает 
диапазон доступных возможностей, но все же их оста- 
ется достаточно для того, чтобы добиться нужного ре- 
зультата за счет комбинирования графических элемен- 
тов. Поскольку текст элементов 51 и |2 внутри раздела 
#радеНеааехг отображается на фоне одной и той же 
картинки (правой стороны заголовка), то применить 
стиль нужно только к одному из этих двух заголовков, 
и тогда будет виден весь текст. Таким образом, второй 
заголовок можно использовать для дальнейптей под- 
становки изображения, и мы присоединим к нему кар- 
тинку, которая появится слева (рис. би 7): 
#фрачеНеааег 11 { 
рааа1па: Орх; 
мага1п: Орх; 
Е1оае: 1еЕс; 
итаЕй: 396рх; 
ВезаНе: 171рх; 
Баскагоцаа: сгаперагепЕ итг1(сг-Е1.3рд) 
хтайе по-гереас; 
} 
прачеНнеаЧехг №1 =зрап { 


Ч1ер1ау: попе; 
} 


Бор 


Рис. 4 + Графические компоненты заголовков «Мнемоники» 


Рис. 5 + Первым размещается повторяющееся изображение, 
являющееся частью заголовка 


ПРИМЕЧАНИЕ 


На этапе первоначального проектирования нужко заранее 
рассмотреть подобные сценарии. Если о верстке начать думать 
только на этапе составления таблиц стилей, то не исключено, 
что для обеспечения приемлемого поведения при изменении 
размера всю графику придется радикально переделать. 


Рис. 6 + Свободный элемент, к которому можно присоединить 
вторую картинку, образующую заголовок... 


Рис. 7 +... если оба текстовых элемента помещены на одну картинку 


эр вену 


._- ни = деенен 2-8 


вы] ая О 
№=в ти ты: 


Рис. 8 + Версия «Мнемоники» без специальных эффектов, Так 
выглядит страница в Мсгозой |щегпе! Ехрогег 


ЕЕ 
пишит доалит- 9 в т ет ет сти пар аи Ба Рин и в кии 
БЕ Бе нтк 2 + 


Рис. 9 + А так выглядит «Мнемоника» в браузерах, 
поддерживающих специальные эффекты 


Идем дальше 14:7 


Послетого как левая часть заголовка построена, его текст 
отображается поверх картинки в правой части, которая 
просто присоединяется к свободному элементу |2: 

#рааеНеааек №2 { 

рааЯ1та: 0рх; 

магд1п: Орх; 

ро51610оп: абзо1щее; 

сор: Орх; 

Е1ане: Орх; 

иутаЕй: 350рх; 

Ветане: 171рх; 

БаскагомиЯ: сгаперагепе иг] (сх-Ехг.)ра) Бор 

глапЕ по-гереае; 

} 

пйраденеааек Н2 врап { 

91=р1ау: попе; 


} 


Идем дальше 


Мы пропустим описание значительной части процес- 
са верстки страницы и расскажем о некоторых нетри- 
виальных эффектах в «Мнемонике». В конце ориги- 
нального С$$-файла есть место, сопровождаемое 
комментарием о том, что начинаются специальные 
эффекты. Если исключить из файла все, начиная сэто- 
го места, то получится страница, изображенная на рис. 
8. Собственно, именно так и будет выглядеть оконча- 
тельный результат в ИегпеЕ Ехрюгег. Однако в брау- 
зерах ЕиеГох или ЗаЁаг! страница будет выглядеть так, 
как показано на рис. 9 


Суть проблемы 


Выбрать уникальные элементы на странице, которым 
не назначен ни класс, ни идентификатор, можно с по- 
мощью имеющихся в С552 селекторов. Беда в том, что 
не все браузеры их поддерживают. Ши воспользовал- 
ся этими селекторами, но вообще-то добиться нуж- 
ного результата можно было бы и проще: достаточно 
изменить разметку, чтобы на нужные элементы мож- 
но было сослаться, 


Когда составляется разметка, нужно стараться поддер- 
живать баланс между простотой кода и возможнос- 
тью выбрать затем необходимые элементы. При со- 
здании сайта Геп Саг4еп ставилась задача добиться 
максимальной гибкости, но в некоторых случаях ее все 
же оказалось недостаточно. В большинстве проектов 
НТМЕ-разметка и С$$ разрабатываются параллельно, 
так что вы можете поступать так, как удобно. 


/;:::: Реконс 


›укция 


Список вариантов дизайна 


В Ицегле! Ехр]огег список вариантов дизайна представ- 
лен в виде одной вертикальной колонки (рис. 10), ав 
НгеРох и ЗаРап! - в виде двух колонок, наклоненных 
под тем же углом, что левый край фона (рис. 11). Что- 
бы достичь такого эффекта, нужно выбрать и пози- 
ционировать отдельные элементы списка. Для этого 
применяются селекторы дочерних и сестринских эле- 
ментов, которые определены в спецификации ($52, 
но не поддерживаются браузером Ицегпе! Ехрюгег для 
УЛтпдоме: 


#1зе1есЕ и1>11 { 


ров1Е1оп: ге1ае1уе; 1еЕ6: -14рх; 
} 

#]зе1есе \1>11+11 ({ 

ров1Ефоп;: ге]1аЕ1уе; 1еЁс: -12рх; 
} 

#]ве1есЕ и1>11+11+11 { 

розтЕТоп: тефае1уе; 1еЕ6: -10рх; 


вне 


Первый селектор выбирает любой элемент 11, являю- 
щийся непосредственным потомком элемента 111, нахо- 
дящегося внутри раздела #1 зе1еск, в данном случае— 
все восемь таких элементов. Второй селектор аналоги- 
чен, только элементу 11 должен предшествовать еще 
хотя бы один такой же элемент, а следовательно, выби- 
раются все элементы 11, кроме первого. Третий селек- 
тор делает то же самое, но выбираемому элементу дол- 
жно предшествовать уже не менее двух таких же 
элементов, и так далее. Строя каскадный список правил, 
каждое из которых переопределяет предыдущее, мы в 
конечном итоге позиционируем все восемь ссылок по 
отдельности. Это излишне запутанное решение простой, 
в сущности, проблемы; как правило, вы можете изме- 
нить разметку, добавив дополнительные классы, и тем 
самым избежать написания длинных селекторов С5$. 
Именно так мы и рекомендуем поступать. 


Ссылки на следующий и 
предыдущий вариант дизайна 


Последнее, что осталось сделать, — это заменить не- 
выразительные ссылки под списком вариантов дизай- 
на более симпатичными графическими эквивалента- 
ми (рис. 12 и 13). Как и раньше, сложность состоит в 
том, что для этих элементов не определены отдель- 
ные классы, так что их не удается выбрать простым 


ТНЕ Е1МАБ ЕМОМО 
СА 


ЕСО ЧАЯ БЕ ТОМАТ: 
мы 


ВОНА 
ТУРЕТНЫС! 


Рис. 10 + Список вариантов дизайна в \егпе! Ехр!югег 


ПРИМЕЧАНИЕ 


Многоточие означает, что это не конец кода. 


ЗКУКООТ$ 
СЕМТЕВЕОСО 
60'$ ЦЕЕЗТУСЕ 


МЕОЮЕМО 


Рис. 11 + Список вариантов дизайна в браузерах того же 
класса, что Агетох и Затай 


Рис. 12 + Вид ссылок № х{ 0е510п$ и Мем/ АП 0е$10п3 
В |П{етпе! Ехр[огег для \/пдо\/$ 


Рис. 13 + Вид ссылок Риог, № и ем АП 
в браузерах тила Агегох и Загаг 


Как сделать правильный выбор И: 


способом. Но в спецификации С$$2 описаны не толь- 
ко селекторы дочерних и сестринских элементов, есть 
и другие. В данном случае удобно воспользоваться се- 
лекторами атрибутов, поскольку они позволяют выб- 
рать элемент в зависимости от его уникальных ха- 
рактеристик. Для всех ссылок в НТМГ-разметке 
определены различные клавиши доступа: 
<а НгеЕ="ВЕЕр: //мим. меххоЬ1ае. сом/ сепдагаеп/ 


а11аев1ди8/" Е1Е1е="У1ем еуегу вабще етоп Со 
сне деп Сагаеп, АссезвкКеу: м". ассеззкеу="и" > 


Такого рода уникальность идеально подходит для при- 


——^ а1вр1ау: Боск; 

итаен: 35рх; 

Везоне: 0; 

оуегЕ1ом: В19аеп; 

раЯа1па-Еор: 18рх; 

Баскагоцпа: ЕгаперагепЕ иг1 (агсЬ1уе-БЗа.91Ё) 

Бор 1еЕЕ по-гереаЕ; 

роз1Е1оп: аБбзо1аее; 

Бор: 16рх; 

]1еЁЕ: 170рх; 

со1о0ог: #958500; 

} 
Как следует из самого названия, селектор атрибутов 
позволяет выбрать элемент, для которого значение 
именованного атрибута соответствует указанному. 
В листинге выше выделена наиболее интересная часть 
селектора: поскольку у нужного нам элемента действи- 
тельно есть атрибут ассеззкеу и его значение равно 
у, то имеет место соответствие, так что к элементу 
применяется стилистическое правило, 


Возможно, вы задаетесь вопросом, почему для списка 
вариантов дизайна мы применили такие сложные се- 
лекторы дочерних элементов, ведь у них тоже имеют- 
ся атрибуты ассеззкКеу. Вообще-то вы правы, име- 
ло смысл так и поступить. 


Как сделать 
правильный выбор 


При разработке «Мнемоники» были различные ва- 
рианты. Ши мог бы по-другому разбить изображе- 
ние заголовка в РВого5Вор, а мог бы совершенно ина- 
че подойти к выбору ссылок, входящих в список 
вариантов дизайна. Если вы понимаете, какие име- 
ются возможности, то сумеете принять правильное 
решение. 


Заключение 


Итак, вы познакомились с сайтом Йеп Сатг4еп. 
Что дальше? 


Возможно, вы принадлежите к числу ветера- 
нов, пользовавитихся технологией С$5 задол- 
го до того, как это обрело смысл. А возможно, 
вы только сейчас познакомились с языком. 


В любом случае, есть шанс, что вы захотите 
продолжить знакомство с 55. В этой части 
книги мы расскажем, как это сделать. 


Шпаргалка по С©$5 


Любому, кто пытался создать хотя бы парочку сайтов с 
применением С55, известно, что поддержка со сторо- 
ны браузеров пока далека от совершенства. Не исклю- 
чено, что если стоящая перед вами задача трудна, то 
все кончится битьем головой об стол и клятвами ни- 
когда, ни за что на свете не подступаться больше к веб- 
дизайну, уж лучше заняться чем-нибудь попроще, ска- 
жем, городским планированием или ядерной физикой. 


Но важно понимать, что вы не одиноки в своих муче- 
ниях, Есть целое сообщество людей, занимающихся 
проблемами дизайна на основе стандартов, и они го- 
товы делиться друг с другом знаниями. 


Из многих посвященных этой теме ресурсов упомянем 
сайт С5$ Сп 5Бее, который координирует Дейв Ши — 
один изавторов этой книги. Он был задуман как наибо- 
лее полный справочник по типичным проблемам и их 
решениям, ниже мы приводим размещенные там мате- 
риалы. Последняя версия сайта находится по адресу 
мгиги/.гле220о ще.согл/с$$/сгВее".: 


Если сомневаетесь, проверяйте 


Вы можете избавить себя от лишней головной боли во 
время отладки, если сразу проконтролируете свой код. 
Некорректно составленные ХНТМТ-разметка и табли- 
цы стилей могут привести к различным проблемам при 
верстке, Пользуясь инструментами контроля, вы научи- 
тесь искать и исправлять ошибки. На сайте \/3С имеют- 
ся программы для проверки ХНТМГи С5$-кода, доступ- 
ные соответственно по адресам ВИр://уайЧа{огм/3З.оте и 
Бир://пезам/. м3 .огр/с3$-уаНЧа‘ют. 


Отметим, что ошибки в начале документа могут быть 
причиной наведенных ошибок ниже из-за неправиль- 
ной вложенности или по другим причинам. Мы ре- 
комендуем начать с исправления нескольких очевид- 
ных ошибок, а потом повторить проверку, в результате 
общее число ошибок может значительно сократиться. 


Создавайте и тестируйте таблицы 
стилей сначала в самых передовых 
браузерах, а затем уже в остальных 


Если вы разрабатываете и тестируете сайт в старом бра- 
узере, то не исключено, что сайт окажется зависимым 
от недостаточно развитого и, возможно, некорректно 
работающего механизма прорисовки. И тогда будет 
очень обидно видеть, что в браузере, лучше совмести- 
мом со стандартами, сайт отображается неправильно. 


Лучше отталкиваться от идеала, а затем переходить к 
браузерам с меньшими возможностями. Тогда ваш код 
будет отвечать стандартам и не придется прилагать 
гигантских усилий для поддержки других браузеров. 
На сегодняшний день это означает, что тестировать 
следует сначала в браузерах МогШа (Егегох), ЗаГат или 
Орега, а только потом вносить. исправления для 
Мтстозой Пиегпе! Ехр|огег. 


Используя плавающее 
позиционирование, проверьте, 
правильно ли расчищается место 


Плавающее позиционирование - это сложная техника, 
которая не всегда дает ожидаемых результатов. Если ока- 
зывается, что плавающий элемент выходит за границы 
объемлющего элемента или вообще ведет себя не так, 
как надо, проверьте правильность своих действий. Оз- 
накомьтесь с руководством Эрика Мейера по этому воп- 
росу на сайте Сотр]ех 5рита! (ммм. сотарехзрига|.сотп/ 
раб Йсапопз/согиате-Йоа{$). 


В избежание схлопывания полей 
задавайте отступы или границы 


Иногда приходится бороться с лишним пустым про- 
странством, а иногда оно не появляется там, где вам 
нужно. Если вы используете поля, то, возможно, 
причина неприятностей -— это схлопывание. Энди 
Бадд (Апау Виаа) на своем сайте объясняет, чего 
следует ожидать (\уу\м\.ап4ираа 4. сотл/агсуе$/2003/ 
/по_тагет_Рог_еггог). 


Старайтесь избегать 
одновременного задания 

для элемента отступов/границ 
и фиксированной ширины 

или высоты 


В Пцегпе! Ехргег 5.0 и 5.5 для МЛп@ом модель прямо- 
угольных областей реализована некорректно, что час- 
то приводит к проблемам при вычислении ширины и 
высоты. Существуют способы обойти эту ошибку 
(см. ВИру/ЛатиеК.сога/С$5/Ехаттр!е‹/Ъохто4де!аск.В т), 
но лучше вообще держаться от нее подальше и зада- 
вать свойство мага1п для потомков, если у родителя 
должна быть фиксированная ширина или высота, 
либо свойство райа1пад для родителя, если конкретная 
ширина/высота должна быть у потомка. 


Избегайте эффекта появления 
нестилизованного контента 
в тете: Ехр/огег 6 для ИЛпаоии$ 


Если для импорта внешних стилей вы пользуетесь 
исключительно директивой @1проге, то рано или 
поздно обнаружите, что в Имегпег ЕхрЮгег 6 для 
У/тдомх$ на мгновение появляется простой, неформа- 
тированный НТМ{-код еще до применения к нему 
стилей. Этого можно избежать, присоединяя таблицу 
стилей по ссылке или поместив на страницу элемент 
зсг1реЕ, См. статью «Назв.оЁ Упзуе@ Согцепь» на стра- 
нице ммм. ]аегоБо!.согп/меБ/с$$/Роцс.азр. 


Не полагаитекь на свойства 

тт - илр/тт-ведт 

{егпе! Ехрюгег для УЛп4о\$ не поддерживает ни то, 
ни другое. Зато свойствам ЕВ и ВезаНе он тракту- 
ет так, как будто речь идет ошти-мтаЕй и мт - 
Ве1аьеЕ, поэтому, применив фильтрацию, вы сможе- 
те добиться нужного результата с помощью одних 
лишь 1 АВ и резавеЕ. Конкретный пример см. в ста- 
тье «Мш-ВеюЪБе Ихе4» на странице пле22о ще. сот/ 
агс!уе5/2004/09/16/птНезв_Я. 


Если сомневаетесь, 
уменьшите значения, 
выраженные в процентах 


Иногда из-за ошибок округления 50% + 50% дает 
100,1%, и весь макет плывет. Попробуйте вместо 50% 
задать 49% или 49,9%. 


Если контент неправильно 
отображается в И\"егпе{ Ехр/огег 


Возможно, вы стали жертвой ошибки «РееКароо' Биз». 
Это, например, происходит, когда пользователь задер- 
живает курсор мыши над ссылкой. О том, как обойти 
эту ошибку, написано на сайте Розиюп 1$ Еуегуй тв 
(муги.розогизеуегу тя, пе/ехр\огег/реекаБоо.В т). 


'  РееКаБоо - это игра, в которую взрослые играют с маленькими 
детьми. Смысл в том, что вы закрываете лицо руками, а потом 
внезапно убираете руки с возгласом «Воо!». Суть ошибки в том, 
что при определенных действиях пользователя и определенной 
разметке контент то исчезает, то появляется. — Прым. пер, 


Проверьте, а возможен ли вообще 
нужный вам эффект 


Некоторые браузеры поддерживают расширения С5$5, 
отсутствующие в официальной спецификации. Так, 
фильтры и форматирование полосы прокрутки рабо- 
тают только в Ниегпе{ Ехрогег. Если программа конт- 
роля говорит, что используемая вами конструкция не 
определена, то, скорее всего, речь ‘идет о нестандарт- 
ном расширении, которое не будет поддержано дру- 
гими браузерами. 


Не забывайте о порядке 
[оУе/НА{е 


Псевдоклассы для ссылок всегда нужно задавать в сле- 
дующем порядке: ИпК, у1зЦед, Воуег, аспуе, При лю- 
бом другом порядке конечный результат не гаранти- 
рован. Если вы пользуетесь также псевдоклассом 
: Росиз, то применяйте порядок ГУНРА (Мэтт Хоуи 
предложил такую мнемоническую фразу «Гота Уа4ег’$ 
Нап@е Еогте!у АпаК!л»). 


Не забывайте о порядке 
следования значений 
в стенографических свойствах 


Стенографические свойства Богаехг, пага1п и 
рааа1па подразумевают определенный порядок сле- 
дования значений; против часовой стрелки, то есть ор, 
иебь, Боцотт, 1еЁ(. Следовательно, запись таго1п: 0 
1рх Зрх 5рх; означает, что верхнее поле отсутству- 
ет, правое равно 1 пикселю и Так далее. Запомните 
мнемоническое слово «ТКоиВГе», и вы всегда будете 
указывать порядок правильно. 


Указывайте единицы измерения 
для ненулевых значений 


Спецификация С$$ настаивает на указании единиц из- 
мерения для кегля шрифтов, величин полей и других 
линейных размеров. (Единственное исключение со- 
ставляет свойство 11пе-пелайе, для которого за- 
давать единицу измерения необязательно, хотя и до- 
пустимо.) Не следует полагаться на поведение 
конкретного браузера в случае отсутствия единиц из- 
мерения. Впрочем, нуль — всегда нуль, будь он выра- 
женврх, ем или иных единицах, поэтому разрешга- 
ется не задавать единицу измерения для значения 0. 
Пример: раЯа1па: 0 2рх 0 1еп; 


Суть С55-дизайна > 


Проверьте, как выглядит страница 
при разных размерах шрифтов 


Передовые браузеры, к примеру Мо7Ша и Орега, по- 
зволяют пользователю изменять размер текста вне 
зависимости от единицы измерения. У некоторых 
пользователей наверняка выставлен иной размер 
шрифта по умолчанию, нежели у вас. Старайтесь, что- 
бы ваша верстка выглядела пристойно в максималь- 
но широком диапазоне размеров игрифтов. 


Следите за соответствием 
регистра в НТМЕ и ©55 


Согласно спецификации, язык С$$ чувствителен к 
регистру букв, и большинство браузеров следуют это- 
му требованию. Имя 'ВомеРаде’ для класса вполне 
допустимо при условии, что оно записано одинаково 
в НТМГ-разметке и в таблицах стилей. Применение 
же правил к элементам класса 'Потерадче’ в этих 
условиях приведет к ошибкам в пользовательских 
агентах, которые строго соблюдают спецификацию 
(например, в Мо2Ша). 


Тестируйте на встроенных 
таблицах стилей, эксплуатируйте 
на импортированных 


Если на этапе разработки вы помещаете таблицу сти- 
лей между тегами <з6у1е> и </зЕу1е>, то устраня- 
ете потенциальную причину ошибок из-за кэширо- 
вания, При работе с некоторыми старыми браузерами 
это бывает весьма существенно. Но не забывайте пе- 
реносить весь код С$$ во внешний файл перед запус- 
ком в эксплуатацию. Этот файл можно импортиро- 
вать (@1трогЕ) или связать (<11ак>). В противном 
случае преимущества внешних таблиц стилей будут 
утрачены. 


Добавляйте видимые рамки 
на этапе отладки верстки 


Универсальное правило типа * {Богдег: 5011а 
1рх #Е00; } может сильно помочь при поиске оши- 
бок в макете. Добавление рамки к отдельным эле- 
ментам поможет выявить перекрытия и лишнее пу- 
стое пространство, которое иначе было бы трудно 
заметить. 


Не заключайте путь 
к изображениям 
в одиночные кавычки 


При указании пути к фоновым изображениям кавыч- 
ки вообще необязательны, но если он заключен в оди- 
ночные кавычки, то Ии(егпе! Ехрюгег 5 для МасшиюзВ 
не загружает картинку. Пользуйтесь либо двойными 


кавычками, либо обходитесь без них. 


Будьте аккуратны при стилизации 
ссылок на внутренние анкеры 


Если в вашем коде встречается классический анкер — 
<а папе="апсВох" >, то к нему будут применять- 
ся псевдоклассы :Воуег и :асЕ1уе. Чтобы этого 
избежать, пользуйтесь для анкеров атрибутом 1а - 
<@1\ 1а = "апсВохг" > или применяйте несколько 
более длинную синтаксическую конструкцию — 
: 1 1пк:Боуег, : 11пК:асе1ме. См. ммм. 4ЪФагоп.отр/ 
с$5/ 1999/09ЛиаК$. 


Не ссылайтесь на пустые файлы, 
резервируя место для будущих 
таблиц стилей (например, 

для КПК или печатных устройств) 


Браузер Ицегпе! Ехр|огег 5 для Мас некорректно обра- 
батывает пустые таблицы стилей, из-за чего время за- 
грузки страницы возрастает. Поместите в файл хотя 
бы одно правило (можно даже комментарий) или про- 
сто уберите ссылку на него. 


Поймите суть проблемы 


Быть может, самый важный наш совет состоит в том, 
что уяснение сути возникшей проблемы -— это ключ к 
ее решению. Понимание приходит с опытом, после 
многих часов, потраченных на составление кода. 


Предположим, что вы заметили пустую горизонталь- 
ную полоску высотой 3 пикселя перед плавающим 
элементом в браузере ИцегпеЕ Ехрюгег для \/1190\5, 
и только в нем. Если вы не знаете, что в этом браузере 
есть ошибка, проявляющаяся при работе с плавающи- 
ми элементами, то будете пробовать отрицательные 
поля, относительное позиционирование, а возможно, 
даже какие-то трюки, чтобы подправить положение 
окружающих элементов и избавиться от ненужного 
промежутка. 


Заключение 


Но, зная заранее об уникальной для Ниегпе Ехрюгег 
проблеме, заключающейся в увеличении полей неко- 
торых плавающих элементов точно на три пикселя, 
вы не станете гадать и пробовать все вышеперечис- 
ленные способы. 


Попытка исправить необъяснимые ошибки приводит 
к их накоплению. Применив на странице несколько 
обходных маневров, вы создаете зависимость от име- 
ющихся в конкретном браузере ошибок алгоритма 
прорисовки. Отладка верстки на более поздних эта- 
пах дизайна лишь усложнится, если сразу не решить 
проблем, возникших в начале работы. 


Понимая, что же на самом деле послужило причиной 
ошибки, вы сможете подойти к ее исправлению более 
осмысленно, Сайт Сп 5Вее{ — это только отправная 
точка. Существует еще множество сайтов, на которых 
детально рассматриваются дефекты, имеющиеся в раз- 
ных браузерах. Мы настоятельно рекомендуем загля- 
нуть на великолепный сайт РозИоп 1$ Еуегу иле (уму. 
розитогизеуегу те.пей. 


(Кстати говоря, если вас заинтересовала ошибка, 
связанная с тремя пикселями, то на этом сайте вы 
узнаете, как исправить ее, а заодно и много других 
специфичных для П\егпе{ Ехрюгег ошибок, см. стра- 
ницу ммм. роз юоп!5еуегу ая. пе/агисе5/ ВоПу- 
Васк.Выт В азауоц!). 


Другие ресурсы 


Мы судовольствием упомянем несколько замечатель- 
ных сайтов и периодических изданий. Кроме них, есть 
немало ресурсов, посвященных С55 и стандартам, надо 
только знать, где искать. 

Сайты о дизаине 

с применением С$$ 

С$$ 0/5си$5 


МГУГИ/.с55-9156155:ОГР 


Объемный список рассылки с новостями из мира (55 
и практическими советами. Здесь спрашивают и от- 
вечают как новички, так и профессионалы. 


С$5 на сайте Мах)е$!юдп 


ВИр://с$$ пахдеярт.сотл.ам 


Сборник подробных, узкоспециальных статей о спис- 
ках, плавающих элементах и многом другом. 


да Суть С55-дизайна 


Подборка ссылок по С$$ 
и стандартам И/еЬБ 


ууу. апдуБи49.сот/ИтК$/с5$ уе _(ап4аг4$ 


Постоянно обновляемая подборка ссылок на статьи по 
С$$, описание различных приемов и советы по исправ- 
лению ошибок. Сайт поддерживает Энди Бадд. 


Ноу ©С$$ 2еатап! 


ууу .дегмгозНеге.сот/Ни К.В 

Эндрю Фернандес составил, наверное, самую большую 
и хорошую подборку ссылок на различные онлайно- 
вые ресурсы, посвященные С55. 


Ро$Шоп [5 ЕуегуТтад 
уугу.розИ1отизеуегу!иар.пе! 
У вас проблема с С$5? Нашли новую ошибку? Загля- 


ните на сайт Большого Джона и Холли -— наверняка 
они утолят ваши печали. 


Публикации 


А И5{ Ара 
мгиги/.а|$‘арай.сота 


Давно издающийся журнал для веб-дизайнеров. 


О/дНа! И/еь Мадагте 

ууу. 4 иа|-муеБ.сот 

Обзоры книг и программ для веб-дизайнера, а также 
многое другое. 

И/еБ ${ап4ага$ Рго]ес{ Виг2 

гиг уе ${апдаг4$.ог?/Б ит 


Постоянно обновляемая информация обо всем, что 
касается стандартов \\еБ. 


Книги 


Рекомендуем следующие книги для начинающих и 
профессионалов: 


1. Емс Меуег. Сазса@те Зу]е $Вее!з: Те Рейиуе 
Сш&е. О’Вещу, 2000. 


2. Емс Меуег оп С$5: Мамегте Ше Гапзиаее оЁ \\еБ 
Реярп. Мем/ В1аегз, 2002. 


3, Моге Емс Меуег оп С$$, Мем В14етз, 2004. 


4. ]еЁЁгеу Хеглап. Реяртиае ми УУеЬ ${ап4агаз. Ме\м 
В!4егз, 2003 («\еЬ-дизайн по стандартам», «НТ 
Пресс», 2005). 


5. Мойу Но2зсШарв. Зрема! Е4Июп: Озте ХНТМЬ апа 
НТМЕ. Оце, 5реста! Еда ют 2002. 


Ждем вашу работу! 


Сайт еп Саг4еп останется открытым для желающих 
прислать свои работы и после выхода этой книги. Изу- 
чив представленные образцы, почему бы не предло- 
жить собственный вариант дизайна? (Не забудьте упо- 
мянуть о кните, когда будете посылать свое творение!) 


Все новые поступления тщательно оцениваются по 
нескольким показателям, изменяющимся от | до 37, 
азатем предлагаются на суд дрессированных обезьян... 
А может, и нет. На самом деле, решение бинарное — 
либо палец вверх, либо вниз — не сложнее, 


Просим понять, что не все присланные работы попа- 
дают в галерею, это вопрос соотношения количества 
и качества. Достойными считаются работы, содержа- 
щие нестандартные и тщательно отделанные визуаль- 
ные образы, на интересную тему или составленные с 
юмором, и в которых применяются принципы пра- 
вильной верстки и типографии. Есть еще иные фак- 
торы, которые трудно выразить словами. Лучитий со- 
вет, который мы можем дать, — сравните свою работу 
стеми, что имеются в официальном списке и, если она 
не уступает уже представленным высококачественным 
образцам, присылайте. 


Оценка и добавление новых работ в галерею произ- 
водятся тогда, когда это удобно Дэйву Ши, поэтому 
наберитесь терпения: рано или поздно вы получите 
извещение о том, принята ли ваша работа. 


Предметный указатель 


Символы 


#Тоо{ет, элемент 33 
#1п(то, элемент 279 
#радеНеадег, элемент 155, 280 
#ргеатЫе, элемент 29, 281 
#ашск5ититагу, элемент 155 
#5ирройлпаТехь, элемент 263 
&#8217, код символа 31 
&пбзр 33 
:Ат${-сПЦа, псевдокласс 238 
‚поуег, селектор 226, 236 
а51-сПа, псевдокласс 238 
<>, элемент 

назначение пустых 35 

общие сведения 25 

погружение других элементов 29 
<5рап>, элемент 

подстановка изображений 37 

назначение пустых 35 
<ИЦе>, элемент в разметке 25 


А 


Абсолютное позиционирование 
воздействие на другие элементы 121 
многоколонная верстка 93 
непозиционированный родитель 271 
переполнение по вертикали 126 
списка ссылок 270 

Авторские права 
включение ссылки на страницу 109 
воровство 48 
общедоступные изображения 163 

Альфа-прозрачность 136 

Анкеры 
стилизация ссылок 293 
финальные 196 

Аномальная трихромазия 76 

Артефакты 135 


Б 

Браузеры 
МО5е и специальные эффекты 222 
МеЁзсаре Мам1дафог 17, 29 
анализ ХМ\-документов 45 


безопасная палитра 70 

включение прозрачного РМб-файла 136 

и размер шрифта 187 

метод переключения стилей для масштабирования 
шрифтов 192 

ограничения эластичного дизайна 251 
оптимизация ЭРЕб-файлов 138 

отображение списков с помощью ($$ 235 
переопределение специфичности 220 
поддержка НТМ!-разметки 2еп багаеп 32 
поддержка автоматических полей 101 
появление нестилизованного контента 80, 292 
просмотр исходного НТМ(Е-текста 28 
разработка дизайна, совместимого со всеми 189, 278 
совместимость с 055 39 

сокрытие рамки 230 

специальные эффекты 228 

стыковка изображений 258 

тестирование присылаемых работ 32 
тестирование таблицы стилей 291 

техника эластичного дизайна 248 
фиксированное позиционирование 113 
чувствительность к регистру 27, 293 


В 
Варианты дизайна 

«Арт Деко» (Трудель) 146 
размер и вес изображения 148 
слои графики 150 

«Атлантида» (Дэвис) 54 
иконография 56 
использование линий 57 
минимализм 55 
поля и промежутки 57 
символизм 59 
согласованность цветов 58 . 
типография 56 

«Баллада» (Ламберт) 78 
направление взгляда 79 
преодоление недостатков табличной верстки 81 
стилевые элементы (55 81 

«Без границ!» (Мокржицки) 152 
нестандартные маркеры 157 
скругленные углы изображений 155 
составные фоновые изображения 154 


7. Философия СС5-дизайна 


«Белая лилия» (Кристенсен) 104 
навигационные ссылки 107 
практичность 108 
принципы проектирования интерфейса 107 
рекомендации по верстке 107 

«Береговой бриз» (Ши) 158 
рисование вручную 159 
создание и приобретение графических образов 161 

«В зеленых тонах» (Макартур) 72 
единство стиля 77 
орнаменты 73 
применение контрастных цветов 74 
текстуры 74 

«Версия один» (Хильхорст) 186 
размер шрифта 187, 191 
сложные проценты 190 

«Весна» (Аттила) 66 
цвет и эмоции 67 
цветовая палитра 68 

«Два океана» (Симс) 174 
выбор оттенка и контрастности 178 
соглашения о шрифтах 177 

«Жажда крови» (Ши) 200 
возможности форматирования 201 
задание настроя с помощью типографских 
эффектов 201 
применение стилей к тексту 202 
управление промежутками 204 

«Живая изгородь» (Мирс) 254 
добавление картинок 257 
задание границ 255 
многоколонная верстка 255 
скрытые заголовки 259 
форматирование текста 258 

«Живым или мертвым» (Пик) 194 
акцентированный текст 199 
оптическое восприятие и типография 196 
шрифт @1пдБаЕ 195 

«Задний двор» (Генри) 92 
методы абсолютного позиционирования 93 
многоколонная верстка 92 
плавающие элементы 94 

«Золотая середина» (Боумен) 208 
выбор шрифта 209 
сглаживание шрифтов 211 
эксперименты со шрифтами 209 

«К югу от границы» (Шилдс) 266 
абсолютное позиционирование 
списка ссылок 267, 270 
добавление графических заголовков 268 
стили ссылок 271 


стилизация контейнера 267 
хвостовик 269 

«Калитка в мой сад» (Лауке) 240 
искусство находок 240 
отображение меню и цветка 244 
позиционирование фоновых изображений 242 
проектирование контейнеров 244 
управление повтором фонового изображения 243 

«Корпорация 2еп\огк$» (Хансен) 272 
неформальные черты 276 
отрицательные поля у заголовков 273 
размещение ссылок 275 
стилизация изображения листа бумаги 273 
фирменный логотип 274 
фоновые изображения 274 

«Кукурузные хлопья» (Инман) 216 
поддержка каскадирования браузерами 217 
слои 220 
специфичность 218 

«Мнемоника» (Ши) 284 
графические ссылки 288 
отображение списка ссылок в разных браузерах 288 
потоврение изображений 285 
сочетание графики с заголовками 286 
специальные эффекты 287 

«Монах» (Саварезе) 116 
абсолютное позиционирование 120 
выстраивание макета вокруг заголовка 116 
дизайн заголовка 119 
дизайн области контента 119 
относительное позиционирование 121 
позиционирование как выразительное средство 117 
сетка как инструмент верстки 118 

«Не так уж бедно» (Рубин) 122 
переменная длина контента 123 
переполнение в плавающих элементах 125 
переполнение при абсолютном 
позиционировании 126 

«Небо над бонсай» (Дэвидсон) 228 
прозрачная тень за изображением 231 
черная рамка вокруг контента 229 

«Ночная поездка» (Ши) 84 
визуализация кода 85 
применение абсолютного позиционирования 86 
разделение фотографий и текста 85 
схлопывающиеся поля 88 
формат РМб для изображений в прозрачной 
области 89 

«Открытое окно» (Генри) 278 
верстка для разных браузеров 280 
поддержка браузера Орега 283 


позиционирование элемента #т\то 279 
стилизация контента и ссылок 282 
«Подсолнух» (Дарвас) 60 
зрительное восприятие пространства 63 
падающие тени 61 
форма в веб-дизайне 62 
«Прет-а-порте» (Мейер) 110 
фиксированное позиционирование 
и горизонтальная верстка 113 
«Радио 2еп» (ван ден Хойфель) 260 
абсолютное позиционирование 261 
графика 260 
масштабирование текста 263 
позиционирование колонок 263 
прокрутка 262 
слои и присоединение графики 262 
«Революция!» (Хелльсинг) 140 
подстановка изображений 141 
применение 65$ для работы с графикой 140 
применение фоновой графики 141 
«Тюльпан» (Шепэрд) 234 
модификация ниспадающих меню 237 
создание с помощью таблиц стилей 235 
«Удвоение» (Клоос) 222 
(5$-сигнатуры 224 
замащивание фона 226 
модель прямоугольных областей 226 
селекторы атрибутов и сопоставление с образцом 224 
«Упругая лужайка» (Гриффит) 246 
ограничения эластичного дизайна 251 
переменное усечение 250 
повторение фоновых изображений 249 
эластичный дизайн Гриффита 248 
«Что там в глубине» (Пик) 166 
реалистичность деталей 168 
трехмерная сцена 167 
уровни 170 
«Энтомология» (Хикс) 98 
отрицательные поля 102 
сочетание задания полей с выравниванием текста 102 
фиксированная и текучая верстка 99 
центрирование 100, 101 
«Японский сад» (Кавачи) 132 
оптимизация 137 
прозрачность 136 
сжатие и графические форматы 133 
Верстка 91 
абсолютное позиционирование 93, 120, 261 
выделение логических групп элементов 29 
дизайн заголовков 116, 119 
для разных браузеров 278 


Предметный указатель 


ландшафтный формат 111 

многоколонная 92, 153 

организация контента 105 

отладка таблиц стилей 219 

относительное позиционирование 121 

переменная длина контента 123 

плавающие элементы 94, 124, 291 
позиционирование как выразительное средство 117 
поисковая форма 109 

практичность 106 

принципы 105, 107 

сетки 118, 153 

сочетание задания полей с выравниванием текста 102 
усовершенствование метода мозаики 147, 152 
фиксированная и текучая 99, 247 


Водяные знаки 196 
Выравнивание 206 


Главная оптическая область 196 
Горизонтальное переполнение 126 
Графика 131 


авторские права 164 

дизайн и абсолютное позиционирование 86 
заказная 160 

избыточность кавычек 293 

нестандартные маркеры 157 
общедоступная 163 

ограничение, налагаемое сеткой 147 
оптимизация 137 

переходы цветов 171 

повторение без стыков 250 
повторяющееся фоновое изображение 257 
подстановка изображений 141 
применение фоновой графики 141 
присоединение к прокручиваемому тексту 262 
прозрачная тень 231 

прозрачность 136 

пропорциональная ширина 250 

размер и вес 148 

реализм деталей 168 

сжатие и оптимизация 133 

скругленные углы 155 

слои 150 

создание и приобретение 161 

составное фоновое изображение 154 
уровни 170 

формат 61Е 134, 136 

формат РЕб 135, 138 

формат РМС 89, 135 


у": Филосо 


ия СС5-дизайна 


д 


Дизайн 
абсолютное позиционирование 86 
архив 34 
гибкость 35, 36 
донесение идеи 59 
единство стиля 77 
зрительное восприятие пространства 63 
и цветовая слепота 76 
использование орнаментов 73 
использование света 59 
использование прозрачных Р№б-файлов 136 
контрастные цвета 75 
минимализм 55 
на основе стандартов 9 
направление взгляда 79 
побочный 240 
преимущества (55 при стилизации элементов 81 
преодоление недостатков табличной верстки 81 
применение изображений в формате РМС 89 
применение фоновой графики 141 
принципы верстки 105 
принципы организации интерфейса 107 
свободное пространство 80 
скругление краев в макете на основе сетки 154 
схлопывание полей 88, 291 
текстура 74 
форма 62 
футуристический 201 
центрирование 100, 101 
эластичный 248 
эмоции и цвет 67 
Дихромазия 77 


Е 
НЫ ее вы РЫТЬ о ам 
Единицы измерения 

ет 128 

рх 128, 188 

обязательность указания для ненулевых значений 292 

относительные и абсолютные 188 


3 
Заголовки 
графические, добавление 268 
добавление фирменного логотипа 274 
и отрицательные поля 273 
интеграция с прочей графикой 171 
применение стилей ко всем элементам 217 
применяемые шрифты 176 
рекомендации по использованию 197 


смешение шрифтов 210 
со скругленными краями 154 
соотношение с текстом 179 
Загрузка 
размер файла и производительность 40 
расширение МеБ Оеуе(орег 244 
Затемнитель (инструмент РПофо$Пор) 160 


И 

Иконки 107 
Иностранные языки 46 
Интерлиньяж 177, 204 


К 

Кернинг 177 

Клавиши доступа 34 

Клетчатый б1ЁЕ 232 

Кодировка символов 
задание языка и кодировки 24 
использование на сайте 2еп багдеп 47 
соответствие кодировки текста и документа 46 

Колонки 
красная строка и отступы 109 
позиционирование 263 

Контейнеры 
<у\>, универсальный контейнер 25 
как упаковка для страничных элементов 255 
присоединение повторяющегося изображения 226 

Контент 
ошибка РееКаБоо Бид 292 
неопределенность длины 123 
окружающая черная рамка 229 
подстановка 142 
простая и удобная организация 273 
размер документа 198 
борьба с переполнением 126 

Контраст 200 

Контрастные цвета 75 

Края 168 

Л 

Ландшафтный формат 111 

Ластик (инструмент РНофо$Пор) 160 

М 

Маркеры, нестандартные 157 

Масштабирование 
и элементы фиксированного размера 44 
текста 44, 263 
шрифтов 187, 191 


Минимализм 
и дизайн 55 
минимизация НТМ|-разметки 26 


Н 


Наследование стилистических правил 217 
Ниспадающие меню 
введение 234 
резервные стили для Тп{етпе{ Ехр[огег 238 
создание с помощью таблиц стилей 235 


0 
Округление, ошибки 292 
Осветлитель (инструмент РПо{о$Пор) 160 
Основной текст 
позиционирование колонок 263 
рекомендации по оформлению 198 
Отладка 
ошибок в (55-верстке 219, 293 
предварительная проверка кода 291 


П 
Переключение стилей, метод 192 
Плавающие элементы 94 
и переполнение по вертикали 127 
расчистка места 124, 291 
ширина и переполнение 124 
Подложка 136 
Подстановка изображений 
и элемент $рап 37 
метод [В 142 
метод Леа/Лэнгбриджа 143 
метод Левина 144 
метод Рандла 144 
Позиционирование 
как выразительное средство 117 
колонок 263 
непозиционированные родители 271 
объемлющих блоков 120 
относительное 121 
фиксированное 113 
фоновых изображений 141 
Поля 
автоматически устанавливаемые 98 
для плавающих элементов в [тете Ехр|огег 94 
задание для элементов в контейнере 268 
отрицательные 102 
схлопывающиеся 88, 291 


Предметный указатель 


Проверка кода 291 
Производительность 

загрузки 40 

минимизация НТМ(-разметки 25 
Пространство 

в типографии 201 

зрительное восприятие 63 

негативное 65 

позитивное 65 

свободное 80, 204 
Протаномалия/дейтераномалия 76 
Протанопия/дейтеранопия 77 
Псевдосмешение цветов (9\Негпа) 137 


р 
Размер документа 198 
Рамка 
вокруг контента 229 
для контраста и разделения фрагментов 
текста 269 
как инструмент отладки 293 
правило ТВоиВЁе 292 
Режим совместимости 100 


С 
Свет 
профессиональная работа 65 
установка угла освещения 62 
Селекторы 35 
дочерних элементов 223, 237, 238 
потомков 35, 222 
сестринских элементов 223 
Семантическая разметка 23 
Сетки 
верстка 118 
гибкость 119 
многоколонная верстка 154 
ограничения на размещение графики 147 
Сжатие 
без потери информации 134 
и графические форматы 134 
и размер файла 148 
с потерей информации 134, 137 
Сигнатура 29, 224 
Символизм 59 
Системы управления контентом (СМ$) 123 
Слои 
графики 150 
присоединение графики 262 
управление порядком перекрытия 221 


< Филосоч 


рия СС5$-дизайна 
Специальные эффекты 215 
($5$-сигнатуры 224 
верстка 287, 247 
и МО$е 222 
каскадирование 217 
конфликты, связанные со специфичностью 218 
меню 235 
модификация ниспадающих меню 237 
переменное усечение 250 
повторение фоновых изображений 249 
присоединение фоновой графики к элементу Боду 241 
прозрачные боковики 231 
селекторы атрибутов и сопоставление с образцом 224 
слои 220 
типы селекторов 223 
управление версиями 229 
Списки 
отображение в браузере 235 
позиционирование списка ссылок 270 
с нестандартными маркерами 157 
элементов 24 
Ссылки 
абсолютное позиционирование списка 270 
в стилизованном хвостовике 264 
для просмотра исходного НТМ[-текста 34 
интеграция с графикой 171 
на архивы вариантов дизайна 34 
на исходные файлы примеров 29 
согласованность 109 
список с нестандартными маркерами 157 
стилизация анкеров 293 
Стандарты М\Меь 
использование в 2еп багаеп 39 
необходимость 15 
определение 9 


Т 


Теги 
элементы 22 
применение стилей 217 
устаревшие 122 

Текст 
акцентированный 199 
верстка с плавающими элементами 94 
интеграция с графикой 171 
использование рамок для разделения 269 
корректировка переполнения по горизонтали 125 
масштабирование 44, 263 
основной, рекомендации по оформлению 198 
отступ от краев колонки 109 
применение стилей 202 


соотношение с заголовками 179 
тестирование при разных размерах шрифтов 293 
форматирование 258 
Текстура 
в дизаине 74 
и реалистичность изображения 169 
Тени 
игра света итени 168 
падающие 61 
прозрачные 159, 231 
Тестирование 
в передовых браузерах 291 
на встроенных таблицах стилей 293 
присылаемых работ 32 
Типография 173 
возможности форматирования 201 
выбор оттенка и контрастности шрифтов 178 
выбор шрифта 209 
декоративные символы 195 
задание разных шрифтов 183 
задание эмоционального настроя 201 
оптическое восприятие 196 
книги 211 
контрастные шрифты 210 
общие семейства шрифтов 182 
применение стилей к тексту 202 
размер шрифта 187, 191 
сглаживание шрифтов 211 
сложные проценты 190 
соотношение заголовков и текста 179 
управление промежутками 204 
шрифты для Меь 181 
эксперименты со шрифтами 209 


Файлы 
Е 134, 136 
Мс 239 
УРЕС 135 
РМ№б 89, 135 
графические, сжатие и размер 148 
оптимизация изображений 133 
уменьшение размера 40 
Фирменный логотип 106, 274 
Фоновые изображения 
включение в дизайн 141 
повторение 249, 257 
подстановка 18 
позиционирование 141, 242 
присоединение к элементу Боду 241 
прототипы сайта 2еп багдеп 17 


составное 154 

управление повтором 243 
Форма в веб-дизайне 62 
Форматирование 

в типографии 201 

управление с помощью ($55 42 


х 
О ик Е а ь Ч > ЕР лены ЗН 
Хвостовики 

логотип 274 

стилизация в разных браузерах 283 

цель применения 108 


Ц 
Цвет 
в (55 70 


в типографии 201 
выбор оттенка и контрастности шрифта 178 
контрастность 74 
особенности восприятия 68 
передача идеи 67 
применение в стилях 218 
просвечивание сквозь фоновую картинку 154 
символические имена 70 
согласованность 58 
цветовые палитры 69 
шрифта 177 
Цветовая слепота 76 
Центрирование 100 


Ш 
| ее оиать РЫСИ Е Зам — ЕЕ Е-Е3ЕЕ ыы: аа А пе. 41 
Шестнадцатеричные значения цветов 70 
Шрифты 
Са\дгармс 421 20 
базовые 182 
без засечек (5ап$ зе) 176, 183 
кегль 175 
контрастность 176 
контрастные гарнитуры 210 
курсивные (сиг5уе) 183 
масштабирование 187, 191 
моноширинные (топо5расе) 9, 183 
наиболее распространенные по платформам 181 
наклон 176 
насыщенность 175 
общие семейства 182 
порча 171 
сглаживание 209 
с засечками (5епР) 183 
сочетание 210 
тестирование при разных размерах 293 


Предметный указатель 


фантазийные (Тап{азу) 183 
форма 175 
цвет 177 


Э 
к РЕ 4..2 а = ера оно прыть ли прибыль БЗНИИГ 
Элементы 
выбор с учетом семантики 23 
и теги 22 
масштабирование и фиксированный размер 44 
нестандартный код 292 
относительно и абсолютно позиционированные 121 
пустой $спрё 29 
селекторы дочерних 223 
селекторы сестринских 223 
указание единиц измерения 
для ненулевых значений 292 
управление порядком перекрытия 221 
Эффекты каскадирования 217 


А 

ых. АА ЕЕ г ООВ: ЗАЛ - ЗВ с 
А 15 Араг, сайт 294 

асгопут, элемент 30 

В 

Баскагоипд-аасНтеп\, свойство 241, 242, 262 
Баскагоипд-ро5топ, свойство 241, 242 
МосКацо{е, элемент 22 

ВоББу 43 

Боду, элемент 279 

Вох Моде! Наск 192, 281 


С 
СаШдтарР1с 421, шрифт 20 
с[аз$, атрибут 26 
СЦеаг Туре, механизм сглаживания шрифтов 188, 189 
(М5 (система управления контентом) 123 
СоотЬПпа МеЬ Раде Рег 76 
Сотр(ехзртта(, демонстрационный сайт 59 
СгеаНуе Соттоп$ 

лицензия 48, 50 

совместное использование творческих работ 163 
(55 (каскадные таблицы стилей) 

Вох Моде[ Наск 192, 281 

включение изображений 141 

влияние на НТМ(-разметку 22 

задание стиля шрифта 203 

переносимость 41 

истоки 16 

конфликты, связанные со специфичностью 218 ` 


_ Философия СС5-дизайна 


многоколонная верстка 92, 153, 255 
отображение списков в браузере 235 
подходы к работе с графикой 140 
преодоление недостатков табличной верстки 81 
пропорциональные размеры шрифтов 188 
просмотр исходного кода 9 

прототип цветовой палитры 69 
рекомендуемые сайты по веб-дизайну 294 
свойства фона 241 

селекторы 223 

сигнатуры 29 

скругленные изображения 154 
совместимость с разными браузерами 39 
создание меню 235 

степень контроля 42 

тестирование в передовых браузерах 291 
типы устройств 40 

цвет 70 

чувствительность к регистру 27, 293 
шпаргалка 291 


О 
БЕШЕНО ЕЕ Е а ЕЕ ТЕ ЕЕ ЕЕ ЕЕ ЕЕ ЗЕ ТЕ Зь р ва 
019 (а| МеБ Мадагтте, журнал 294 
О1пдБа{$, семейство фантазийных шрифтов 195 
ООСТУРЕ (тип документа) 
в разметке сайта 7еп батдеп 28 
режим совместимости и переключение ООСТУРЕ 100 
указание в начале документа 24 
Огира система управления контентом 123 


Е 

ет, единица измерения 
использование для масштабирования шрифтов 191 
сравнение срх 128 


Е 

ровер АДИС ТО рт" с ты ЗЕЕ ЕАИС С ЗСИЕЗЕЕЕТИ за г . 
АгеРох, браузер 217, 288 

топе, тег 122 

Гоп{-$12е-аЧ]и5ф, свойство 185 

Гоп{-5Де, свойство 176 

Гоп{-уапап\, свойство 202 

опЕ-мета НЕ свойство 175, 176 

Реевапд, программа 208 


б [ 


СТЕ, графический формат 
клетчатый полупрозрачный узор 232 
общее описание 134 

оптимизация изображений 137 
прозрачность 136 
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ЗРЕС, графический формат 
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Ю{с-файлы 239 
задание резервных стилей 238 
метод переключения стилей 
для масштабирования шрифтов 192 
модификация ниспадающих меню 237 
отображение списков с помощью таблиц стилей 236 
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поддержка фиксированного присоединения 
изображения 260 
поля для плавающих элементов 94 
соглашения об именовании версий 10 
сокрытие Р№б-файлов 89 
эффект появления нестилизованного контента 292 
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наборы шрифтов для МеЬ 181 
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дизайн цветовой палитры 68 
работа со шрифтами 208 
рисование вручную 158 
создание прозрачных теней 159 
установка глобального угла освещения 62 
шестнадцатеричные значения цветов 70 
РМС, графический формат 
альфа-прозрачность 136, 139 
добавление прозрачной тени 231 
изображения 89 
общее описание 135 
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Атлантида, с. 58 
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Пе Коза 10 ЕлбЕНептеги В се ы ‚„ ТЪе Вова тю ЕаНяептети 


Оранжевые тона раковины создают цветовой контраст Заголовок в одних лишь синих тонах больше соответствует 
теме, но ему недостает контрастности 


Атлантида, с. 68 и 69 


еее 


Палитра цветов дизайна «Весна» 
включает оттенки зеленого, намек на голубой и белый цвет Создание цветовой палитры в РАо{о$пор 


Атлантида, с. 75 и 76 
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Увеличение контрастности приводит к конфликту с другими «В зеленых тонах» при недостаточной контрастности 
деталями 


Одновременный контраст приводит к иллюзии мерцания 
на границах основных цветов 


Атлантида, с. 77 
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Пиойкы В ЛырАИН 


Один и тот же цвет кажется более оранжевым 
на желтом фоне и более желтым на красном 
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Основной дизайн Геп багдеп, пропущенный через фильтр, имитирующий протанопию (слева) и дейтеранопию (справа) 


БеаибУ 1 с5$ 


($55 Хеп Сатаей 


4 _‹ Беацбу’!1с5$ 
7С55 7еп Саке 


Изображение сохранено в формате СЕ с 256 цветами, размер Изображение сохранено в формате СЕ с 32 цветами, размер 
файла равен 8,6 Кб файла равен 5,0 Кб 


тт 
му 


СЕК Г\ > 
у ит 
гей &:а1 аеть 


Изображение сохранено в формате СЕ с 4 цветами, размер файла равен 2,1 Кб 


5 феачёут1с$$ 
(55 Сеп (з<агае! 


Изображение сохранено в формате /РЕб с коэффициентом качества 70, размер файла равен 8,3 Кб 


Беаи(у11с5$ Беаиру 115$ 


#55 Хеп Сатаету 


(55 Хеп Сатаега 


Изображение сохранено в формате ЛРЕб с коэффициентом Изображение сохранено в формате /РЕС с коэффициентом 
качества 30, размер файла равен 3,7 Кб качества 10, размер файла равен 2,5 Кб 


Беаибу |155 


(055 Иеп Сата 


Изображение сохранено в формате РМС с глубиной цвета 24 бит, размер файла равен 16,2 Кб 


24. Беанв С5$ 


Изображение сохранено в формате РМС с глубиной цвета 8 бит и 64 цветами, размер файла равен 5,3 Кб 


> (еп Сатае 


Изображение сохранено в формате РМС с глубиной цвета 8 бит и 4 цветами, размер файла равен 2,2 Кб 
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Прозрачный @1-, который был подготовлен для белого фона, отображается на светло-зеленом фоне 


Прозрачный @Р, который был подготовлен для белого фона, отображается на темно-зеленом фоне 


Береговой бриз, с. 161 
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Рис. 6 + Исходная поверхность листа Для имитации прожилок и текстуры добавлены тени и выделения 


Два океана, с. 179 
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Контрастность шрифта в заголовке «Двух океанов» 
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5ве0т опу Яе зпеет Гог Те 157 То Ю00 п то ТГ роде 


Инверсные цвета в тексте, расположенном ниже заголовка 


Жажда крови, с. 202 


Примеры разного цвета шрифта 


Упругая лужайка, с. 250 


Изображения травы, которыми мостится «Упругая лужайка»: ярко-зеленое для основного фона, коричневое для боковой колонки 
и темно-зеленое для главной области контента 


При повторении видны стыки На одной смещенной плитке видно В результате клонирования примыкающих областей 
несоответствие цветов на стыках шов закрашивается 


Окончательный вид плитки Теперь стыки гораздо менее заметны 


Мнемоника, С. 285 о 
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Все изображения, использованные в «Мнемонике» 
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Вид страницы после применения начальных стилей, задающих цвета ссылок и шрифты 


Первая фоновая картинка присоединена к элементу Боау 


